Читать книгу Leaflet - Astrid Günther - Страница 10

Was sollten Sie beim Einsatz von defer oder async mit Leaflet beachten?

Wenn Sie Ihre Karte auf Ihrer Website anzeigen, werden Sie nicht nur das Leaflet-Skript laden. Sie werden später noch eigenen JavaScript-Code schreiben. Dieser eigene Code setzt das Laden des Leaflet-Skripts voraus. Aus diesem Grund müssen Sie sicherstellen, dass die Leaflet-Bibliothek vollständig geladen ist, bevor Ihr eigener Code ausgeführt wird. Dies können Sie mithilfe des Eventhandlers load.

Obwohl Ihr eigenes Skript voraussetzt, dass Leaflet vollständig geladen ist, können Sie das Attribut async verwenden. Sehen Sie selbst: Das folgende einfache Beispiel zeigt es Ihnen.

<html> <head> <title>Eine OSM-Karte mit Leaflet</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /> </head> <body> <div id="map" style="width: 600px; height: 400px"></div> *<script src="mymap_99.js" async></script> *<script *src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" async></script> </body> </html>

In Ihrem eigenen Skript mymap_99.js müssen Sie mithilfe von window.addEventListener('load', function() … ) das Laden des vollständigen HTML-Dokuments abwarten.

*window.addEventListener('load', function() { var map = L.map('map', { center: [50.27264, 7.26469], zoom: 10 }); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map); }, false *);

Alle weiteren Beispiele hier im Buch habe ich ohne das Attribut async erstellt, weil ich den Schwerpunkt auf die Verwendung von Leaflet selbst setzen möchte.

Подняться наверх