Question

我正在编写一个网站，在滚动时自动加载新内容（如Facebook墙）。每个内容项都有一个图像，在同一页面上甚至可以有1000多个图像。为了性能，我想向视口外的图像添加display：none。 Google没有帮我找到最佳解决方案，所以我决定在这里问一下。如果您对同一页面上的大量图像有更好的想法，那么欢迎，但不，我不能将内容分隔到页面！

THX！

修改对于那些不明白的人。我已经写过这个剧本了。当用户到达底部时，它会加载X个新项目。工作完美，不需要建议。我的问题是，在60多张图片之后，浏览器会变得迟钝。

Answer 1

http://www.infinite-scroll.com将是一个很好的起点

Answer 2

EDIT1

第二次尝试：
这是一个切换功能：
http://jsfiddle.net/HerrSerker/LzGGd
把它与我的另一个小提琴混合

HTML

<div data-tagname="img" data-src="http://lorempixel.com/300/200/sports/2" data-width="300" data-height="200" style="width:300px; height: 200px">Click on it</div>

的jQuery

$(function() {

    $.fn.makeImg = function() {
        var img = $('<' + $(this).data('tagname') + ' class="toggle" src="' + $(this).data('src') + '" width="' + $(this).data('width') + '" height="' + $(this).data('height') + '">')
        $(this).replaceWith(img)
    }

    $.fn.makeDiv = function() {
        var div = $('<div data-tagname="img" data-src="' + $(this).attr('src') + '" data-width="' + $(this).attr('width') + '" data-height="' + $(this).attr('height') + '" style="width:' + $(this).attr('width') + 'px; height:' + $(this).attr('height') + 'px;">')
        $(this).replaceWith(div)
    }

    $('img.toggle').live('click', function() {
        $(this).makeDiv()    
    })
    $('[data-tagname="img"]').live('click', function() {
        $(this).makeImg()

    })
})

原始

如果你像facebook（或twitter）那样做，你应该用JavaScript检查窗口的scrollTop 如果使用scrollTop比完整窗口高度减去体高200px，则启动一个AJAX请求，加载在当前HTML之后添加的新HTML。之前没有加载图像。

这里（http://jsfiddle.net/HerrSerker/QhMe5/，使用jQuery）你找到了一个演示（没有AJAX部分）。如果向下滚动并且只有200像素向左滚动，它会附加到正文（某些HTML）。

Answer 3

如果图像被加载，它们必须在本地客户端内存或缓存中，无论如何，获取资源，你无能为力。

但如果他们此刻没有显示，浏览器仍无法渲染它们，因此通过将display:none设置为图像，您无法保存任何资源。

我假设您知道必须通过Javascript按需加载图片，而不是在页面初始加载时加载图像，否则您的页面将永远加载。

Answer 4

要回答您的实际问题，您可以循环浏览所有元素的位置，以确定它们是否位于基于滚动位置的当前视口内。

唯一的问题是每个你想要循环遍历DOM树的图像来确定它的实际位置，如果你有100多个图像就会消耗更多的内存然后让100+坐在那里。 / p>

我理解这个问题，但除非你遇到实际的性能问题，否则我会留下它。

将图像隐藏在视口之外

4 个答案:

EDIT1

HTML

的jQuery

原始