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:

  

JS:

 $(document).ready(function() { var newImage = "images/002.jpg"; $("#myImage").css("display","none"); $("a.tnClick").click(function() { // imgLoad here }); }) 

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

 $(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 () гарантирует, что загрузка .load () срабатывает только один раз, поэтому нет дубликатов выцветания. Результат .each() в конце состоит в том, что некоторые браузеры не .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(); 

Кажется, что эти работы повсюду …

  • Перетащить пакетный файл для нескольких файлов?
  • определить, является ли файл изображением
  • Повернуть изображение вокруг символа (JAVA)
  • Фотосъемка с программным обеспечением на Android
  • Как использовать httpwebrequest для вывода изображения с сайта на локальный файл
  • Должен ли я хранить мои изображения в базе данных или папках?
  • Странная проблема с памятью при загрузке изображения в объект Bitmap
  • Сравнение изображений - быстрый алгоритм
  • Настройте контрастность изображения на C #
  • Написание метаданных изображений на Java, предпочтительно PNG
  • Высококачественное сжатие JPEG с помощью c #
  • Давайте будем гением компьютера.