Как предотвратить функцию jquery load() от переопределения шага выполнения анимированного gif?

Question

У меня есть страница с фотографиями, каждая из которых завернута в div с class="photo_wrap". Пользователи могут видеть определенное количество фотографий. Если они хотят видеть больше, то они нажимают кнопку «Просмотреть фотографии». Пока они ждут загрузки фотографий, я показываю «индикатор выполнения» gif с id="spinner". Из-за некоторых проблем с кладкой pluggin и загрузкой фотографий я поставил кладку на «перезагрузку» после того, как все img полностью загружены. Проблема в том, что это также предотвращает анимацию «progress bar» gif. Я думал, что, написав $('div.photo_wrap img').load(..., будут сделаны только фотографии с class="photo_wrap", но это все равно предотвратит анимацию «progress bar» gif. Зачем?

$(document).ready(function(){ 

    $("#spinner").show(); 

    $.ajax({ 
     type: "POST", 
     url: 'my_script.php', 
     dataType: 'html', 
     success: function(data){ 
      var $container = $('#myPhotos'); 
      $container.append(data); 

      $('div.photo_wrap img').load(function(){  
       $container.masonry('reload'); 
      }); 

      $container.masonry('reload'); 

      $("#spinner").hide(); 
     } 
    }); 

    return false; 
}); 

Answer 1

$('div.photo_wrap img').load(function(){...}); будет срабатывать для каждого изображения при загрузке. По крайней мере, если бы обработчик находился на месте до события onload.

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

<img src="", data-src="myImages/....jpg"> 

Таким образом, JavaScript может скопировать URL через дорогу от data-src к src, и нет никаких шансов загружаемыми образы стреляющие перед обработчиком OnLoad прилагается:

function loadMoreImages() { 
    $("#spinner").show(); 
    $.ajax({ 
     type: "POST", 
     url: 'my_script.php', 
     dataType: 'html', 
     success: function(data){ 
      var $container = $('#myPhotos'); 
      $container.append(data); 
      var promises = $('div.photo_wrap img').map(function() { 
       var d = $.Deferred(); 
       $(this).attr("src", $(this).data('src'));//copy img url across 
       $(this).load(d.resolve).error(d.resolve);//attach load and error handlers 
       return d.promise(); 
      }).get(); 
      $.when.apply(this, promises).done(function() { 
       $container.masonry('reload'); 
       $("#spinner").hide(); 
      }); 
     } 
    }); 
} 

частично испытаны

Вы увидите, что для ответа, когда загружено всего изображений, мы передаем массив обещаний (по одному на img) до jQuery.when.

Я не уверен, что это исправит проблему, но это по правому краю.