Как загрузить большое количество изображений через jQuery ImagesLoaded

Question

У меня есть страница, которая загружает около 150 изображений на страницу. Структура изображения заключается в следующем:

HTML КОД

<table class="form-table"> 
    <input type="hidden" name="bgtype" id="bgtype" value="pattern"/> 
    <tr class="wpbp-field-patternbg"> 
    <th style="width:20%"><label for="patternbg">Pattern</label></th> 
    <td><div id="wpbp-pattern-select"> 
     <div class="description">Select a pattern you would like to be applied as the background. Click on a pattern to select it.<br> 
     </div> 
     <input class="radio" type="radio" name="patternbg" id="patternbg2" value="45degreee_fabric.png" checked='checked'> 
     <label for="patternbg2" class="is-loading"><a class="pattern_preview" data-img="45degreee_fabric.png" data-content="45degreee fabric"><img src="45degreee_fabric.png" alt="" class="wpbp-pattern-img "/></a></label> 
     <input class="radio" type="radio" name="patternbg" id="patternbg3" value="patterns/60degree_gray.png" > 
     <label for="patternbg3" class="is-loading"><a class="pattern_preview" data-img="60degree_gray.png" data-content="60degree gray"><img src="60degree_gray.png" alt="" class="wpbp-pattern-img "/></a></label> 
     <input class="radio" type="radio" name="patternbg" id="patternbg4" value="always_grey.png" > 
     <label for="patternbg4" class="is-loading"><a class="pattern_preview" data-img="always_grey.png" data-content="always grey"><img src="always_grey.png" alt="" class="wpbp-pattern-img "/></a></label> 
     </div></td> 
    </tr> 
</table> 

(я снял полный путь к изображениям, чтобы сделать код выше как минимум)

CSS КОД

#wpbp-pattern-select.is-loading { 
    background-image: url('../images/loading.gif'); 

} 
#wpbp-pattern-select .is-loading img { 
    opacity: 0; 
} 

Jquery

var $container = $('#wpbp-pattern-select'); 
$imgs = $container.find('img'), 

// use ImagesLoaded 
$container.imagesLoaded() 
    .progress(onProgress) 
// reset progress counter 
imageCount = $container.find('img').length; 
console.log(imageCount + ' properly loaded images'); 

// triggered after each item is loaded 
function onProgress(imgLoad, image) { 
    var $item = $container.find('img'); 
    $item.removeClass('is-loading'); 
} 

То, что я хочу добиться того, чтобы иметь дисплей поджимать вертушка (.is заряжания) на каждого отдельного изображения, пока не был загружен, что определенный образ. Когда закончится загрузка, счетчик удалит отображение исходного изображения.

Я попытался сыграть с библиотекой jQuery imagesLoaded, чтобы заставить это работать, но я не могу понять это правильно. Это можно сделать?

Любая помощь будет высоко ценится, благодаря

Answer 1

Хорошо первый в вашем CSS вы определяете #wpbp-pattern-select .is-loading img но в ваших JS вы пытаетесь удалить класс из самого изображения:

function onProgress(imgLoad, image) { 
    var $item = $container.find('img'); 
    $item.removeClass('is-loading'); 
} 

это дизайн ? Однако, попробуйте следующие ЯШ:

$(document).ready(function(){ 
    var $container = $('#wpbp-pattern-select'); 
    $imgs = $container.find('img'); 

    // all images are hidden by css 

    $imgs.each(function() { 
    var el = $(this), 
     checkforloaded = setInterval(function() { 
      var image = el.get(0); 
      if (image.complete || image.readyState == 'complete' || image.readyState == 4) { 
      clearInterval(checkforloaded); 
      el.removeClass('is-loading'); // or: el.closest('label').removeClass('is-loading'); 
      } 
     }, 20); 
    }); 
}); 

Я просто не знаю, как это будет работать с большим количеством изображений, хотя