JQuery загрузка изображений с полным обратным вызовом

Я видел комментарий в блоге Бена Наделя, где Стивен Рашинг разместил загрузчик, но я не могу понять, как я могу передать селекторы и параметр... Я думаю, что мне также нужны функции completeCallback & errorCallback?

function imgLoad(img, completeCallback, errorCallback) {
    if (img != null && completeCallback != null) {
        var loadWatch = setInterval(watch, 500);
        function watch() {
            if (img.complete) {
                clearInterval(loadWatch);
                completeCallback(img);
            }
        }
    } else {
        if (typeof errorCallback == "function") errorCallback();
    }
}
// then call this from anywhere
imgLoad($("img.selector")[0], function(img) {
    $(img).fadeIn();
});

HTML:

<a href="#" class="tnClick" ><img id="myImage" src="images/001.jpg" /></a>

JS:

$(document).ready(function() {
    var newImage = "images/002.jpg";
    $("#myImage").css("display","none");
    $("a.tnClick").click(function() {
        // imgLoad here
    });
})
Источник

4 ответа

Решение

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

$(document).ready(function() {
    var newImage = "images/002.jpg"; //Image name

    $("a.tnClick").click(function() {
      $("#myImage").hide() //Hide it
        .one('load', function() { //Set something to run when it finishes loading
          $(this).fadeIn(); //Fade it in when loaded
        })
        .attr('src', newImage) //Set the source so it begins fetching
        .each(function() {
          //Cache fix for browsers that don't trigger .load()
          if(this.complete) $(this).trigger('load');
        });
    });
});

.one() call гарантирует, что.load() запускается только один раз, так что никаких дублирующих вставок нет. .each() в конце концов, потому что некоторые браузеры не запускают load событие для изображений, извлеченных из кэша, это то, что пытается сделать опрос в примере, который вы опубликовали.

Источник

Вы должны быть осторожны при использовании события загрузки для изображений, поскольку, если изображение найдено в IE кэша браузера, и (как мне сказали) Chrome не будет запускать событие, как ожидалось.

Поскольку мне пришлось столкнуться с этой проблемой самостоятельно, я решил, проверив атрибут DOM завершенным (говорят, что он работает в большинстве основных браузеров): если он равен true, я просто отменил привязку ранее связанного события load. Смотрите пример:

$("#myimage").attr("src","http://www.mysite.com/myimage.jpg").load(doSomething);

if ($("#myimage").get(0).complete) {

    // already in cache?
            $("#myimage").unbind("load");
            doSomething();


}

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

Источник

Я хотел эту функциональность и определенно не хотел загружать все изображения при визуализации страницы. Мои изображения на Amazon s3 и с большой фотогалереей, это было бы много ненужных запросов. Я создал быстрый плагин jQuery, чтобы справиться с этим здесь:

$("#image-1").loadImage('/path/to/new/image.jpg',function(){  
  $(this).css({height:'120px'});//alter the css styling after the image has loaded
});

Таким образом, в основном, когда пользователь нажимает на миниатюру, представляющую набор изображений, я загружаю другие изображения в этот момент времени. Обратный вызов позволяет мне изменить CSS после загрузки изображения.

Источник

Попробуй это?

doShow = function() {
  if ($('#img_id').attr('complete')) {
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()', 100);
  }
};

$('#img_id').attr('src', 'image.jpg');
doShow();

Похоже, что выше работает везде...

Источник
Другие вопросы по тегам