如何通过 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-loading)，直到该特定图像被加载。加载完成后，微调器将不再显示原始图像。

我试过使用 jQuery imagesLoaded 库来让它工作，但我做不好。这能做到吗？

非常感谢任何帮助，谢谢

Answer 1

好的，首先在您的 CSS 中定义 #wpbp-pattern-select .is-loading img，但在您的 JS 中，您尝试从图像本身中删除 class：

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

这是设计使然吗？但是，请尝试以下 js：

$(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);
  });
});

我只是不确定这对许多图像的表现如何

如何通过 jQuery ImagesLoaded 加载大量图片

How to load a large amount of images through jQuery ImagesLoaded

jquery

image

loading

preload

imagesloaded