隐藏背景图像的子集，直到 children() 用 Jquery 完全加载

Question

我有一些文章，每篇文章都包含一个包含多个列表项的列表。每个列表项都定义了一个背景图像。 HTML 看起来像这样：

<article>
  <ul>
    <li><!-- background-image--></li>
    <li><!-- background-image--></li>
  </ul>
</article>

我想隐藏这些列表项，直到每张图片都被加载并且我试图为每篇文章都这样做。

我的第一次尝试是使用两个嵌套循环，但感觉有点笨拙和复杂。

function preloader() {

    $('article').each( function(i) {        

        $(this).addClass('loading');

        var childNum = $(this).find('ul li').size();

        $(this).find('ul li').each( function(n) {

            var bgurl = $(this).css('background-image').replace(/url\(|\)|"|'/g,'');

            $('<img/>').attr('src', bgurl).load(function() {

                if (n == childNum) {

                    // remove class .loading from current article
                }

            });                             
            n++;
        });
    });
}

有没有更优雅的方式来做到这一点？

Answer 1

只需以visibility:hidden 开头，并在window.load 事件触发时显示。

CSS

.loading li{
    visibility:hidden;
}

HTML

<article class="loading">
  <ul>
    <li><!-- background-image--></li>
    <li><!-- background-image--></li>
  </ul>
</article>

和jQuery

$(window).load(function(){
   $('article.loading').removeClass('loading');
});

---

如果您想将每篇文章中的图像显示为已加载其自己的图像，那么您的代码非常接近，但您可以通过以下方式进行改进

• 同时处理error 事件
• 缓存您的选择
• 在设置src 之前绑定load 和error 事件以正确处理缓存图像

这是一个实现

$(function () {
    var articles = $('article').addClass('loading');
    var urlRegExp = /(url\([\'\"]?)([^\'\"]+)/gi;

    articles.each(function(){
        var article = $(this),
            images = $('li', article).map(function(){
                return $(this).css('background-image').split(urlRegExp)[2];
            }).get(),
            imageCount = images.length;

        $.each(images, function(index, url){
           var img = new Image();
            $(img).on('load error', function(){
                imageCount--;
                if (imageCount === 0){
                    article.removeClass('loading');
                }
            })[0].src = url;
        });

    });
});

演示地址 http://jsfiddle.net/gaby/2ATHQ/