JQuery или проверка Javascript, если изображение загружено

Я знаю, что в Stackoverflow их много, но я не нашел тот, который работает для меня в последней версии jquery (1.10.2).

Я попытался:

$(".lazy").load(function (){}

Но я считаю, что после некоторого исследования с использованием .load для обнаружения загрузки изображения в jQuery 1.8 устарела. Что мне нужно сделать, это запустить функцию изменения размера изображения после загрузки изображений. Я не контролирую HTML и на данный момент мне нужно добавить размеры изображения через jQuery, добавив атрибут (через .attr()) после загрузки страницы, чтобы я мог использовать lazyload js.

Проблема в том, что мне нужен точный способ удержать все мои различные скрипты, пока изображение не загрузится должным образом, иначе функции иногда срабатывают перед загрузкой каждого изображения. Я попытался использовать $(window).load(function (){});, но иногда он все еще срабатывает перед загрузкой каждого изображения.

Ответ 1

Я обычно делаю это:

var image = new Image();
image.onload = function () {
   console.info("Image loaded !");
   //do something...
}
image.onerror = function () {
   console.error("Cannot load image");
   //do something else...
}
image.src = "/images/blah/foo.jpg";

Помните, что загрузка асинхронна, поэтому вам нужно продолжить script внутри событий onload и onerror.

Ответ 2

Также существует полезное свойство .complete объекта изображения, вы можете использовать его, если вы уже установили .src своего <img>, прежде чем присоединять к нему прослушиватели событий:

var img=document.getElementById('myimg');
var func=function(){
    // do your code here
    // `this` refers to the img object
};
if(img.complete){ 
    func.call(img);
}
else{ 
    img.onload=func; 
}

Ссылка: http://www.w3schools.com/jsref/prop_img_complete.asp

Ответ 3

Я бы дал изображениям, которые требуют этого ограничения, классу типа mustLoad, где:

<img class="mustLoad" src="..." alt="" />

а затем создайте общую функцию обработчика нагрузки изображения, например:

$('img.mustLoad').on('load',function(){
        /* Fire your image resize code here */
});

Изменить:

В ответ на ваши комментарии об исключении .load() выше, .load() устарел, в пользу .on('load') чтобы уменьшить двусмысленность между событием onLoad и загрузку Ajax.

Ответ 4

В случае ожидания загрузки нескольких изображений:

var images = $("#div-with-images img");
var unloaded = images.length;
images.on('load', function(){
  -- unloaded;
  if (!unloaded) {
    // here all images loaded, do your stuff
  }
});

Ответ 5

Что мне нужно сделать, это запустить функцию изменения размера изображения после загрузки изображений.

Вы уверены, что вам нужно загрузить изображение? Ожидание загрузки изображения перед изменением размера может привести к большому скачку в макете страницы, особенно если изображения имеют большие размеры файлов, например анимированные GIF.

Обычно для изменения размера изображения вам нужно знать только внутренние размеры изображения. Хотя нет никакого случая рассказать вам об этом, достаточно легко опросить изображения для данных. Что-то вроде этого может быть особенно эффективным:

<img src="..." data-resizeme="123" />

(function() {
    var images, l, i, tmp;
    if( document.querySelectorAll) {
        images = [].slice.call(document.querySelectorAll("img[data-resizeme]"),0);
    }
    else {
        tmp = document.getElementsByTagName("img");
        images = [];
        // browser compatibility is fun!
        for( i=tmp.length-1; i>=0; i--) {
            if( tmp[i].getAttribute("data-resizeme")) images.unshift(tmp[i]);
        }
    }

    for( i=images.length-1; i>=0; i--) {
        images[i].onload = resizeImage;
        images[i].onerror = cancelImageResize;
    }
    var timer = setInterval(function() {
        for( i=images.length-1; i>=0; i--) {
            if( images[i].width) {
                resizeImage.call(images[i]);
                images[i].onload = null;
                cancelImageResize.call(images[i]);
            }
        }
        if( images.length == 0) clearInterval(timer);
    },100); // adjust granularity as needed - lower number is more responsive.

    function cancelImageResize() {
        var i;
        for( i=images.length-1; i>=0; i--) {
            if( images[i] == this) {
                images.splice(i,1);
                break;
            }
        }
    }

    function resizeImage() {
        console.log("Image "+this.src+" is "+this.width+"x"+this.height);
    }
})();

Надеюсь, это поможет!