如何隐藏视口之外的图像[重复]

Question

我正在编写一个在滚动时会自动加载新内容的网站（如 Facebook 墙）。每个内容项都有一个图像，在同一页面上甚至可以有 1000 多个图像。为了提高性能，我想将display:none 添加到视口外的图像中。我无法将内容分页！

我已经写好了剧本。当用户到达底部时，它会加载 X 个新项目。

我的问题是，在 60 多张图片之后，浏览器会变得迟钝。

Answer 1

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

唯一的问题是，您需要遍历 DOM 树以确定其实际位置的每个图像，如果您有 100 多个图像，则对每个图像执行此操作会消耗更多内存，然后将 100 多个图像留在原处。

我理解这种担忧，但除非您对此有实际的性能问题，否则我会保留它。

Answer 2

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

但是如果它们现在没有显示，浏览器无论如何都不会渲染它们，所以没有任何资源可以通过将display:none 设置为图像来保存。

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

Answer 3

编辑1

第二次尝试：
这是一个切换功能：
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 比整个窗口高度减去正文高度小 200 像素，则启动一个 AJAX 请求以加载在当前 HTML 之后添加的新 HTML。在此之前不会加载图像。

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