В настоящее время я использую Jquery Lazy Load, и мне было интересно, есть ли способ сделать обратный вызов, когда все изображения из моего контейнера закончились загрузка (когда ленивая нагрузка сделала всю его магию).
Причиной этого является то, что я использую jScrollPane Plugin, и я хотел бы назвать функцию повторного инициализации jScrollPane.
Спасибо
Посмотрев на источник, кажется, что плагин с ленивой загрузкой вызывает функцию settings.load после загрузки изображения, передающего загруженный элемент изображения, и пару параметров:
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
Поэтому вам, вероятно, нужно будет просто установить что-то вроде этого:
function yourhandler(element, el_left, settings) {
//Whatever you want
//This function will be called each time that an image (element in this case) is loaded
}
$("img.lazy").lazyload({
load : yourhandler
});
Если вы хотите убедиться, что изображение загружено, вы можете прикрепить прослушиватель к загруженному изображению:
function yourhandler(element, el_left, settings) {
element.load(function() {
alert('Image Loaded');
});
}
После попытки использования кода самым "чистым" методом является привязка к методу .load ваших изображений:
$('img.lazy').load(function() {
console.log($(this).attr('src') + ' loaded');
});
$('img.lazy').lazyload({
container:$('.p_content'),
});
Для обработки последнего загруженного изображения и запуска кода только и только после его завершения (все изображения загружены) вы должны использовать функцию обработчика, как ранее говорилось в VAShhh, в отличие от вызова функции, необходимо отправлять только 2 параметра, поэтому это функция вызывается с помощью оператора javascript.
Затем вы сможете успешно получить параметр " elements_left" и сравнить его с 0 (ноль): последнее загруженное изображение осталось. Что-то вроде этого:
function yourhandler(elements_left, settings) {
var imageNode, container;
if(elements_left === 0) {
// All images were loaded.
// Now do whatever you need with imageNode or its parents (container, etc) in order
// to run any other Plugin
imageNode = $(this);
container = settings.container;
alert('Ready to continue! Image node is $(this) and container settings.container');
}
}
Пожалуйста, проверьте этот пример: jsfiddle.net/eRyww/4
В качестве альтернативного ответа я создал плагин "ленивой загрузки", который будет делать именно это. Он предлагает обратный вызов после загрузки всех элементов. Это немного отличается и не совсем просто для изображений, но в любое время выбранные элементы попадают в поле просмотра браузера.