1

いくつかの記事があり、それぞれに複数のリスト アイテムを含むリストが含まれています。すべてのリスト項目には background-image が定義されています。HTML は次のようになります。

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

すべての画像が読み込まれるまで、これらのリスト項目を非表示にしたいと思います。記事ごとにそうしようとしています。

私の最初の試みは、ネストされた 2 つのループを使用することでしたが、少し厄介で複雑に感じました。

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++;
        });
    });
}

これを行うためのよりエレガントな方法はありますか?

4

1 に答える 1

0

それらを開始して、イベントが発生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/のデモ

于 2013-04-25T11:30:15.867 に答える