плагин jQuery lazyload - PullRequest
Новая
       12

плагин jQuery lazyload

2 голосов
/ 20 января 2010

У меня есть страница, содержащая список из примерно 100 изображений, и я не хочу, чтобы браузер загружал все это, если пользователи только просматривали прибл. 10 из них.

Итак, я попробовал плагин jQuery.lazyload на своей странице.

Если я напишу: 

$( function() {
    $('.list li img').lazyload( { placeholder: 'n.gif' } );
});

для кода: 

<ul class="list">
    <li><img src="myawesomeimage.jpg"></li>
</ul>

Браузер загружает изображения до того, как к ним применяется отложенная загрузка. Я попытался lazyload ниже тегов изображения без конструкции готового документа - те же результаты

Я проксировал загрузку изображений через php-скрипт, который регистрирует доступ к изображениям - и он все еще загружает все в начале ...

У кого-нибудь есть идея?

Ответы [ 3 ]

4 голосов
/ 29 июля 2010

Я обнаружил, что разные браузеры ведут себя по-разному. Некоторые браузеры предварительно загружают все изображения даже с отложенной загрузкой.

Если вы можете контролировать генерацию HTML, для этого есть абсолютное решение.

Выведите ваши теги изображений так: 

<img src=placeholder.png original=myimage.png>

Другими словами - заставьте атрибут src указывать на какое-то изображение-заполнитель (или полностью его опустить) и укажите исходный атрибут, указывающий на изображение, которое вы хотите загрузить с отложенной загрузкой.

Это заставит браузер предварительно загрузить изображение заполнителя (лучше всего использовать только 1 заполнитель для всех ваших тегов img), а затем дождаться загрузки изображения, на которое указывает исходный атрибут. Это работает на всех браузерах в моем опыте.

4 голосов
/ 20 января 2010

Вы тестируете это локально или через интернет.Единственное, о чем я могу думать, это то, что если вы разрабатываете локально или в локальной сети, изображения будут загружаться так быстро, что плагин не будет работать до тех пор, пока они не загрузятся.Одним из способов отладки может быть использование сетевой вкладки Firebug.Добавьте вызов $ .ajax к нигде не важному перед выполнением отложенной загрузки, а затем откройте вкладку сети, чтобы увидеть, когда запрос AJAX выходит по сравнению с моментом загрузки изображений.Если все хорошо, вы увидите запрос AJAX до запроса изображения.Если вы не видите никаких запросов на изображения, убедитесь, что вы просматриваете группу «Все».

Кроме того, убедитесь, что у вас отключено кэширование при тестировании всего этого, потому что в противном случае браузер немедленно загрузит изображенияиз кэша.

Наконец, я заметил, что создатель плагина упоминает, что он не работает в IE, когда работает в паре с jQuery 1.3.В каком браузере вы тестируете?

0 голосов
/ 05 апреля 2011

Может быть, стоит попробовать плагин с именем JAIL http://www.sebastianoarmelibattana.com/projects/jail, который хорошо работает в том же сценарии и имеет преимущество для работы во всех браузерах и использования атрибута data- *. час Вы можете прочитать больше об этом на http://blog.sebarmeli.com/2011/01/04/reasons-why-i-wrote-the-plugin-jquery-asynchronous-image-loader-jail/ и найти исходный код на Github

...