2

私は無限スクロールを使用するウェブサイトに取り組んでいます。is_element_in_view()これらの3つのイベントで実行されると呼ばれる関数があります。

scroll
load
resize

この関数は、呼び出されたとおりに動作し、gifイメージが読み込まれている要素が表示されているかどうかを確認し、表示されている場合は、サーバーからコンテンツを取得するためのajaxリクエストを起動します。

サーバーは、次のようなjsonオブジェクトを送り返します。

    [{
        "url": "\/embed\/182926\/some-slug",
        "thumb": "http:\/\/cdn.site.com\/91\/26\/a62c1ad74327321dab78bb194c130da5.jpg",
        "type": "video",
        "is_original": false,
        "is_prank_news": false,
        "title": "Hello World",
        "description": "\t<p>Enjoy this video!<\/p>",
        "teaser": "Click Me!",
        "finder": "Found by <strong>Jim<\/strong> yesterday",
        "likes": "2 likes",
        "ad_img": null,
        "media_stats": "<div class=\"media-status\">2000 views<\/div>"
    },
    more objects...]

わかりやすくするために、この応答にはオブジェクトが1つだけありますが、実際には20が返されます。これがjsonデータからhtmlを構築する方法です。

$.ajax({
    url: '/some/ajax/url',
    type: 'get',
    data: 'somedata',
    dataType: 'json',
    success: function(response) {

        if(!$.isEmptyObject(response)) {

            for(var i = 0; i < response.length; i++) {

                if(response[i]) {
                    var item = response[i];
                    var title = item.title.replace(/\\"/g, '"');

                    var media_label = '';                   
                    var item_description_teaser = '';
                    var likes = '';
                    var ad_image = '';
                    var media_stats = '';

                    if(item.description) {

                        // description
                        item_description_teaser = '<div class="description">' + item.description.replace(/\\"/g, '"');

                        // teaser
                        item_description_teaser += (item.teaser) ? '<a href="'+ item.url +'" class="teaser">'+ item.teaser.replace(/\\"/g, '"') +'<img src="images/teaser-arrow.png" alt="" /></a></div>' : '</div>';
                    }

                    // media label
                    if(item.type == 'article' && item.is_prank_news || item.is_original && item.is_prank_news) {
                        media_label = '<span class="media-label prank-news-network">Prank</span>';
                    }
                    else {
                        if(item.type == 'article') {
                            media_label = '<span class="media-label article">Article</span>';
                        }
                        else if(item.is_original) {
                            media_label = '<span class="media-label original">Original</span>';
                        }
                    }

                    // likes
                    if(!settings.hide_likes) {
                        likes = '<span class="likes">' + item.likes + '</span> | ';
                    }

                    // ad image
                    if(item.ad_img) {
                        ad_image = '<img src="'+ item.ad_img +'" alt="" class="ad-img" />';
                    }

                    block += '<article class="block">' +
                                '<div class="inner-left">' +
                                    media_label +
                                    '<a href="'+ item.url +'" title="" class="thumb">' +
                                        '<img src="'+ item.thumb +'" alt="" width="198" height="111" />' +
                                    '</a>' +
                                '</div>' +
                                '<div class="inner-right">' +
                                    '<a href="'+ item.url +'" title="" class="title">' +
                                        title +
                                    '</a>' +
                                    item_description_teaser.replace(/\\"/g, '"') +
                                    '<div class="media-stats">' +
                                        likes +
                                        '<span class="finder">'+ item.finder.replace(/\\"/g, '"') +'</span>' +
                                    '</div>' +
                                    ad_image +
                                '</div>' +
                                item.media_stats +
                            '</article>';

                }
            }

            $('#content').append('<div class="page page-'+ page_num +'">' + block + '</div>');

            // update page count
            page_num++;

            // clear previous listings
            block = '';
        }
        else {
            $('#content').append('<div class="page page-1"><p class="nothing-to-show">Nothing found...</p></div>');
        }
    },
    error: function() {
        alert('error');
    }
});

ご覧のとおり、変数内に格納されている1つの巨大な文字列にすべてを入れていますblock。ループごとにこの文字列にデータを追加し、最後にループの外側のページに追加します。

jsからhtmlをビルドするより速い方法があるように感じます。少し前に、私が行っているような巨大な文字列を作成することは、私が忘れていた記事で説明されている他の方法ほど効率的ではないことを読みました。では、これを行うためのより速い方法は何ですか？

4

3 に答える 3

2

ブロックを配列に格納すると、次のようblocksになります。

$('#content').append(blocks.join(""));

編集：それはOPが望んでいたものではありませんでした。イベントがトリガーされるたびに問題が追加されていると思います。

を作成しDocumentFragment、その中に新しいものを入れてから、 に追加し$("#content")ます。残念ながら、DocumentFragments は をサポートしていませんinnerHTML。

したがって、ダミー要素を作成し、それを埋めてから、その子ノードをコンテナーに入れます。

var dummy = $("<div>").html(block), content = $("#content");
$.each(dummy.children(), function(i, c) {content.append(c);});
于 2012-07-11T19:33:55.213 に答える
0

HTML で既にマークアップされている値をサーバーに返すように設定すると、次のようになります。

$('#content').append( response );

その後、サーバー側でループとフィルタリングをすべて処理し、ドキュメント内の JS の量を削減できます。

于 2012-07-11T19:46:11.117 に答える
0

DOM にhtml要素を追加するとパフォーマンスが大幅に低下するため、大きな文字列を作成して最後に追加することをお勧めします。

ほとんどの場合、非常に長い文字列を 1 つ作成し、最後に追加する方法が最適です。これは、コードの読みやすさ、プログラミングの容易さ、および速度のトレードオフを最大限に活用するためです。

于 2012-07-11T19:51:51.940 に答える