Question

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

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

Answer 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的某个地方。

Answer 2

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

你应该加载第一个 n 图像，然后在回叫时加载下一个 n （当然是隐藏的），然后在他们的回叫上等等等等直到一切都预先加载。

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

Answer 3

通过旋转木马更好地实现。有一个flickr轮播的例子。请查看以下链接，它可能对http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_feed.htmlou有用。

使用“隐藏”CSS属性或获取每组新图像更好吗？

3 个答案: