Большинство поисковых систем будут индексировать изображения, которые скрыты, если вы не используете встроенные стили, чтобы скрыть изображение. Большинство браузеров не будут загружать скрытые изображения.
Существует тестовая страница, которая может подтвердить это утверждение. Исключением являются некоторые старые мобильные браузеры, но я утверждаю, что ленивая загрузка на мобильные телефоны может негативно сказаться на хорошем опыте просмотра.
http://www.w3.org/2009/03/image-display-none/test.php
В вашем CSS файле добавьте следующую модификацию.
.lazy-img { display: none; }
Теперь вы можете загрузить страницу с такими ленивыми изображениями, как они, и они будут проиндексированы.
<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>
Важно, чтобы вы включили titleатрибут для изображения. Или вы окружаете <imgтег> тегом ссылки <a> и текстом ссылки. В противном случае поисковые системы будут ассоциировать ключевые слова с изображением по расстоянию между словами. Вы идете ко всей этой проблеме для SEO, вы могли бы также пройти весь путь.
Если вы используете выше, как есть. Ничто не покажет, так как изображения скрыты. Вы хотите удалить этот класс внизу документа. Ключевым моментом здесь является использование встроенного чистого Javascript. Этот Javascript выполняется сразу после завершения макета вышеупомянутых элементов. Если вы загрузите все ваши внешние файлы JS внизу (как вы должны). Вы должны разместить этот блок Javascript над этими файлами. Так что нет никакой задержки в изменении DOM.
<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>
Теперь я добавил условные выражения для IE9, так как он не поддерживается getElementsByClassNameв 8 и старше. Что должно произойти (не проверено), так это то, что эти браузеры будут загружать изображение как есть.
Преимущество этого подхода состоит в том, что он сохраняет HTML в чистоте с точки зрения веб-сканера.