Триггер ленивая загрузка изображений после изменения изображений

Question

Я работаю над страницей, отображающей сразу несколько сотен изображений. Я использую Lazy Load plugin, чтобы страница быстро загружалась. Все работает отлично, но я добавил слайдер jQuery UI, чтобы пользователи могли увеличивать/уменьшать изображения, перетаскивая ручку. Если пользователи сжимают изображения, возможно, что изображения, которые раньше были ниже складки, теперь перемещены в видимую область. Поскольку прокрутка не происходила, изображения не загружаются.

Я добавил событие, запускающее загрузку при перетаскивании дескриптора размера, но он вызывает загрузку ВСЕХ изображений, а не только тех, которые вошли в область просмотра.

код довольно прост:

Вот код телеграфировать плагин.

$("#pplImages.lazy").lazyload({event : "LoadVisibleImages"}); 

function LoadVisibleImages() { 
    $("#pplImages.lazy").trigger("LoadVisibleImages"); 
} 

А вот код, который вызывает загрузку из Slider

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) {LoadVisibleImages();} 
}); 

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

Может ли кто-нибудь увидеть, что я делаю неправильно?

Answer 1

Это может быть проблема с плагином. В interwebs много обсуждается этот плагин, который не работает в современных браузерах.

Посмотрите на JavaScript Asynchronous Image Loader (JAIL). Автор написал это как прямой ответ на эту проблему: Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL).

This example показывает, как запускается загрузка изображения. Возможно, вы можете изменить свой код, чтобы сделать то же самое.

Попробуйте это:

1. Добавить скрытый DIV на страницу с идентификатором «триггером»
2. Установите ваше ResizeImages функцию для имитации щелчка на объекте Триггера DOM
3. Измените свою ленивую нагрузку код, чтобы использовать плагин JAIL и устанавливать его для загрузки изображений всякий раз, когда нажимается объект триггера.

Ваш код может выглядеть примерно так:

JavaScript

$("#pplImages.lazy").jail({ 
    selector:'#trigger', 
    event: 'click' 
}); 

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) { 
     $('#trigger').click(); //Notice this simulated click event 
    } 
}); 

HTML (просто добавить к вашей странице)

<div id="trigger" class="hidden"></div> 

Вы будете иметь возиться, чтобы сделать эту работу отлично вы, но выше, должны начать.