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事件
缓存您的选择
在设置load以正确处理缓存图像之前绑定error和src事件

这是一个实现

$(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/

隐藏背景图像的子集，直到children（）完全加载Jquery

1 个答案: