{"id":155794,"date":"2020-04-06T18:24:50","date_gmt":"2020-04-06T16:24:50","guid":{"rendered":"https:\/\/www.iphone-ticker.de\/?p=155794"},"modified":"2020-04-06T18:35:58","modified_gmt":"2020-04-06T16:35:58","slug":"neu-in-ios-13-4-lazy-image-loading-in-safari","status":"publish","type":"post","link":"https:\/\/www.iphone-ticker.de\/neu-in-ios-13-4-lazy-image-loading-in-safari-155794\/","title":{"rendered":"Neu in iOS 13.4: &#8222;Lazy Image Loading&#8220; in Safari"},"content":{"rendered":"<p>Auf <a href=\"https:\/\/mathiasbynens.be\/demo\/img-loading-lazy\">dieser Beispiel-Webseite<\/a> seht ihr nach dem Aufrufe 100 Katzenbilder. Um diese anzeigen zu k\u00f6nnen, muss Apples Safari-Browser die Bilder nat\u00fcrlich auch laden. Dies passiert bislang direkt beim Seitenaufruf und kann unter Umst\u00e4nden f\u00fcr einen recht hohen Datenverbraucht sorgen.<\/p>\n<p>Denn: Solltet ihr die Seite nur ansurfen und direkt feststellen, dass ihr eine falsche Adresse eingegeben oder grunds\u00e4tzlich kein Interesse an Katzenbildern habt, sind alle 100 Grafiken bereits geladen, rechnen gegen euer Datenvolumen und sorgen f\u00fcr unn\u00f6tigen Traffic beim Server-Betreiber.<\/p>\n<p>Um eben jenes Verhalten zu unterbinden nutzen pfiffige Webseitenbetreiber schon l\u00e4nger den sogenannten &#8222;Lazy Image Loading&#8220;-Ansatz. Statt direkt alle Bilder zu laden, werden nur jene Grafiken geladen, die der Browser im aktuellen Fenster anzeigen muss. Die Bilder weiter unten auf der Seite, die noch nicht im sichtbaren Bereich des Browsers angelangt sind, werden erst nachgeladen wenn der Besucher anf\u00e4ngt nach unten zu scrollen.<\/p>\n<p><a href=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-155795\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load-700x601.jpg\" alt=\"Lazy Load\" width=\"700\" height=\"601\" srcset=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load-700x601.jpg 700w, https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load-500x429.jpg 500w, https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load.jpg 1500w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>Ein schlauer Trick, der bislang selbstprogrammiert werden musste &#8211; zuk\u00fcnftig jedoch werden fast alle Browser das &#8222;Lazy Image Loading&#8220; <a href=\"https:\/\/web.dev\/native-lazy-loading\/\">direkt ab Werk<\/a> unterst\u00fctzen.<\/p>\n<p>Sind die Bilder entsprechend markiert, werde diese nur geladen, wenn sie auch zur Anzeige ben\u00f6tigt werden. Das ganze sieht in HTML dann so aus:<br \/>\n<code>&lt;img src=\"Bild.jpg\" loading=\"lazy\" alt=\"\u2026\" width=\"200\" height=\"200\"&gt;<\/code><br \/>\nW\u00e4hrend Chrome das &#8222;Lazy Image Loading&#8220; bereits seit Version 76 beherrscht, ziert Apple sich derzeit noch mit der Bereitstellung. Allerdings ist das Feature jetzt in iOS 13.4 integriert und muss nur noch aktiviert werden um auf entsprechend vorbereiteten Webseiten auch zu funktionieren: <b>Einstellungen &gt; Safari &gt; Erweitert &gt; Experimental Features &gt; Lazy Image Loading &gt; Einschalten<\/b>.<\/p>\n<p>Zwar kennzeichnet Apple die neue Funktion noch als experimentell, grunds\u00e4tzlich d\u00fcrfte jedoch nichts dagegen sprechen, das Feature schon mal zu aktivieren. Im besten Fall beschleunigt ihr so euren Surf-Alltag.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"tracking\" src=\"https:\/\/vg01.met.vgwort.de\/na\/67ad9dff91cb4ba282ab072875d56ebf\" width=\"1\" height=\"1\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<a href=\"https:\/\/www.iphone-ticker.de\/neu-in-ios-13-4-lazy-image-loading-in-safari-155794\/\"><img width=\"150\" height=\"150\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load-katze-150x150.jpg\" class=\"alignright tfe wp-post-image\" alt=\"Lazy Load Katze\" decoding=\"async\" loading=\"lazy\" \/><\/a><p>Auf dieser Beispiel-Webseite seht ihr nach dem Aufrufe 100 Katzenbilder. Um diese anzeigen zu k\u00f6nnen, muss Apples Safari-Browser die Bilder nat\u00fcrlich auch laden. Dies passiert bislang direkt beim Seitenaufruf und kann unter Umst\u00e4nden f\u00fcr einen recht hohen Datenverbraucht sorgen. Denn: Solltet ihr die Seite nur ansurfen und direkt feststellen, dass ihr eine falsche Adresse eingegeben [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":155796,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[5040,52],"class_list":["post-155794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-ios-13-4","tag-safari"],"aioseo_notices":[],"subheadline":["Schneller Seitenaufbau, geringer Datenverbrauch"],"featured_image":["https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load-katze.jpg"],"rest_api_enabler":{"subheadline":"Schneller Seitenaufbau, geringer Datenverbrauch","featured_image":"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2020\/04\/lazy-load-katze.jpg"},"_links":{"self":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/155794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/comments?post=155794"}],"version-history":[{"count":7,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/155794\/revisions"}],"predecessor-version":[{"id":155803,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/155794\/revisions\/155803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media\/155796"}],"wp:attachment":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media?parent=155794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/categories?post=155794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/tags?post=155794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}