Die meisten Suchmaschinen indizieren Bilder, die ausgeblendet sind, solange Sie keine Inline-Stile verwenden, um das Bild auszublenden. Die meisten Browser laden keine versteckten Bilder.
Es gibt eine Testseite, die diese Behauptung überprüfen kann. Einige ältere mobile Browser sind die Ausnahme, aber ich behaupte, dass langsames Laden auf Mobiltelefonen zu einer guten Browsererfahrung kontraproduktiv sein könnte.
http://www.w3.org/2009/03/image-display-none/test.php
Fügen Sie Ihrer CSS-Datei die folgende Änderung hinzu.
.lazy-img { display: none; }
Jetzt können Sie eine Seite mit so faulen Bildern laden und sie werden indiziert.
<body>
<img class="lazy-img" src="img1.jpeg" title="image title"/>
<img class="lazy-img" src="img2.jpeg" title="image title"/>
<img class="lazy-img" src="img3.jpeg" title="image title"/>
<img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>
Es ist wichtig, dass Sie das titleAttribut für das Bild angeben. Oder Sie umgeben das <img> -Tag mit einem <a> -Tag und einem Linktext. Andernfalls ordnen Suchmaschinen dem Bild Stichwörter nach Wortabstand zu. Du wirst all diese Schwierigkeiten für SEO haben, die du genauso gut den ganzen Weg gehen könntest.
Wenn Sie das oben Genannte so verwenden, wie es ist. Es wird nichts angezeigt, da die Bilder ausgeblendet sind. Sie möchten diese Klasse am unteren Rand des Dokuments entfernen. Der Schlüssel hierbei ist die Verwendung von reinem Inline-Javascript. Dieses Javascript wird sofort ausgeführt, nachdem das Layout der obigen Elemente abgeschlossen ist. Wenn Sie alle Ihre externen JS-Dateien unten laden (wie Sie sollten). Sie sollten diesen Javascript-Block über diesen Dateien platzieren. Damit es keine Verzögerung bei der Änderung des DOM gibt.
<body>
<!--[if lte IE 8]
<style type="text/css">.lazy-img { display: block !important; }</style>
[endif]-->
<noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
<img class="lazy-img" src="img1.jpeg" title="image title"/>
<img class="lazy-img" src="img2.jpeg" title="image title"/>
<img class="lazy-img" src="img3.jpeg" title="image title"/>
<img class="lazy-img" src="img4.jpeg" title="image title"/>
<![if gte IE 9]>
<script type="text/javascript">
var images = document.getElementsByClassName('lazy-img');
Array.prototype.forEach.call(images, function(image){
image.setAttribute("data-src",image.getAttribute("src"));
image.setAttribute("src","loading.gif");
});
while(images.length > 0) { images[0].className = ""; }
</script>
<![endif]>
</body>
Jetzt habe ich Bedingungen für IE9 hinzugefügt, da dies getElementsByClassNamein 8 und älteren Versionen nicht unterstützt wird . Was passieren sollte (nicht getestet) ist, dass diese Browser das Bild so laden, wie es ist.
Der Vorteil dieses Ansatzes ist, dass der HTML-Code aus der Sicht des Webcrawlers sauber bleibt.