0

本当にこれで頭を殴りました。5つのグループでページにロードする画像の量はさまざまです。ページのロード時に、最初の5つをロードしようとしています。その後、リンクをクリックして各グループを追加します。

私の論理はこれです：

  • ページの読み込み時にすべてのリスト要素の配列を作成します

  • 配列の最初の10を、liを画像に変換し、ウィンドウの読み込み時にページにフェードインする関数に渡します。

  • ユーザーが[さらに読み込む]ボタンをクリックすると、配列から5つの追加グループを渡します

上記のロジックに従わないが、liを変換してフェードインする私のコードは次のとおりです。

jsfiddleの完全なコメント付きの混乱を参照してください：http： //jsfiddle.net/danielredwood/qntMg/

ご協力いただきありがとうございます！

function buildImg() {
    $('.userGallery li').each(function(){
        var loc = $(this).find('a').attr('href'),
            ttl = $(this).find('a').attr('title'),
            img = $('.userGallery').append($('<img/>', { class: 'user', src: loc, alt: ttl })),
            usr = $('.user');

        $(this).remove();

        usr.each(function(i){
            $(this).delay(200*i).animate({ opacity:1 },400);
        });
    });
}

    var elm = $('.userGallery li'),
        cnt = 0,
        tns = [];

    for(i=0;i<elm.length;i++){
       if(cnt==10){
         buildImg(tns);
         tns=[];   
       }
       tns[cnt++]=elm[i].image;
    }

    buildImg(tns);
4

1 に答える 1

2

これを行うためのもう少し簡単な方法があります。説明するためにbuildImg()、必要なすべてのリンクを見つけて、それぞれの画像オブジェクトを作成し、それらを配列に配置します。

loadMore()次の10枚の画像をギャラリーにロードし、.fadeIn()アニメーションを開始します。 loadMore()最初に1回呼び出され（最初の10個の画像をロードするため）、その後、loadMoreボタンがクリックされると、押されるたびに次の5個をロードするために呼び出されます。

jsFiddleには10個の画像しかないため、10個を超える画像でどのように機能するかを確認できるように、それらを複製しました。

すべてがdocument.readyハンドラーにカプセル化されているため、DOMがロードされたときに開始され、グローバルは実際にはグローバルではありません（つまり、関数ブロック内にあります）。

$(document).ready(function() {
    var imgInfo = [];
    var imgCntr = 0;
    function buildImg() {
        $('li a').each(function(){
            var img = new Image();
            img.src = this.href;
            img.alt = this.title;
            img.className = 'user';
            img.style.display = "none";
            imgInfo.push(img);
        });
    }

    function loadMore(num) {
        var gallery = $('.userGallery');
        var delay = 0;
        for (len = Math.min(imgInfo.length, imgCntr + num); imgCntr < len; imgCntr++) {
            gallery.append(imgInfo[imgCntr]);
            $(imgInfo[imgCntr]).delay(delay).fadeIn(400);
            delay += 400;
        }
    }

    buildImg();
    loadMore(10);

    $(".loadMore").click(function() {
        loadMore(5);
        return(false);
    });
});​

ここでの作業デモ：http：//jsfiddle.net/jfriend00/h2GVz/

これは、スケジュールされたアニメーション時間よりもロードに時間がかかる場合に備えて、ロードされるまで画像のアニメーション化を開始しない、もう少し複雑なバージョンです。この余分な複雑さは必要ないかもしれませんが、私はそれを行う方法に興味があったので、それを書きました：http: //jsfiddle.net/jfriend00/WAuuB/

于 2012-04-14T02:39:08.540 に答える