Сообщение от da_ff
|
При формировании странички на сервере засовывай путь к картинке тегу img не в src, а data-src (например), а в src задавай пустую гифку (придется задавать размеры картинок вручную). По событию scroll проверяй какие картинки (картинки, к которым требуется применять этот эффект пометь предварительно каким-нибудь классом) попадают в видимую область экрана и копируй значение в аттрибут src, а data-src удаляй. Однако, при этом люди с отключенным js не увидят картинок.
Другой вариант, засунь блок js-кода перед закрывающим тегом body (можно быть уверенным, что к моменту выполнения этого блока dom-дерево готово), в котором сперка скопируешь значения аттрибута src в свой аттрибут, а картинкой назначь пустую гифку, а дальше понятно. Таким образом посетители без js увидять все картинки,а людям со включенным js картинки будут подгружаться по мере необходимости.
|
Первый вариант не могу использовать, поскольку пользователи без js (поисковые роботы) должны тоже видеть картинки.
По второму варианту:
Вставляю этот код перед закрывающим тегом </body>
(function()
{
var imgs = document.getElementsByTagName('img');
if (!imgs)
return;
for (var i = 0; i < imgs.length; i++)
imgs[i].src = '/images/loading.gif';
})();
Проблема в том, что картинки все равно загружаются, а после того, как загрузятся меняются на картинку loading.gif. Смена src не останавливает загрузку основной картинки. Картинка загружается, а потом меняется src на loading.gif.