使用“隐藏”CSS 属性还是获取每组新图像更好？答案

【问题标题】：Is it better to use the "hidden" CSS attribute or fetch each set of new images?使用“隐藏”CSS 属性还是获取每组新图像更好？
【发布时间】：2011-12-02 16:59:59
【问题描述】：

我正在尝试通过使用 JSONP 的 jQuery AJAX 调用从 Flickr 获取一堆照片数据。我想一次显示 n 张图片，然后在用户每次点击按钮时显示接下来的 n 张图片。

我读过一种方法是在回调函数中将所有图像添加到 DOM 中，并使用“隐藏”CSS 属性在用户单击时隐藏和显示下一个 n 个图像.这是推荐的做法吗？

【问题讨论】：

标签： jquery ajax jsonp hidden

【解决方案1】：

这完全取决于您要做什么。如果您创建img 元素并设置它们的src，即使它们通过display: none 隐藏（就此而言，即使您根本不将它们添加到DOM）浏览器仍然会请求图像从服务器。如果您的页面允许用户在查看图像之前对其进行过滤，或者允许分页，则可能会产生不必要的网络流量。理想情况下，仅在用户很可能会查看图像时才预取图像，但要提前到用户不必等待它们。

请注意，在您准备好之前，不必将 img 元素放入 DOM 中。只需创建img 元素并设置其src 就足够了（try it here，该代码根本不会将img 添加到DOM 中）。因此，您可以保留img 元素的地图，例如：

var preloaded = {};
function preload(path) {
    var img;
    if (!preloaded[path]) {
        preloaded[path] = img = document.createElement('img');
        img.src = path;
    }
}

然后，当您准备好使用它们时，您就拥有了它们，但不必将它们藏在 DOM 中的某个地方。

【讨论】：

【解决方案2】：

是的，最好尽早加载所有图像。这减少了用户的等待时间，他们更有可能查看您的所有内容。

您应该加载第一个 n 图像，然后在回调时加载下一个 n（当然是隐藏的），然后在它们的回调中以此类推直到一切都被预加载。

话虽如此，如果你有 100 组大小 n，你应该限制预加载的数量，也许只预加载接下来的两三组（并且每次点击都应该加载另一组）。我们的想法是始终领先于用户，这样他们就不必等待查看下一组图像。

【讨论】：

谢谢！我没有想到级联负载。说得通。顺便说一句，您所描述的与我提出的原始解决方案略有不同，它说只需一次预加载所有内容（这会导致很长的初始等待时间）。

【解决方案3】：

最好通过轮播来实现。有一个 flickr 轮播的例子。检查以下链接，它可能对http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_feed.htmlou 有用。

【讨论】：