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...]

为清楚起见，此响应中只有一个对象，但实际上我回到了 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');
    }
});

如您所见，我将所有内容都放在一个存储在变量中的巨大字符串中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

将 html 元素添加到 DOM 会带来很大的性能损失，因此最好创建一个大字符串并将其附加到最后，这篇文章很好地解释了它

对于您的大多数用途，创建一个非常长的字符串并将其附加到末尾的方法将是最佳选择，因为它充分利用了代码易读性、易于编程和速度的权衡。

于 2012-07-11T19:51:51.940 回答