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

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

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

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

请注意,在您准备好之前,您不必img元素放在DOM中。 只需创建img元素并设置其src ( 在此处尝试 ,该代码永远不会将img添加到DOM中)。 所以你可以保留img元素的地图,例如:

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

然后,当你准备好它们时,你会拥有它们,但不必将它们塞进DOM中的某个地方。

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

您应该加载前n个图像,然后在回调时加载下一个n (当然是隐藏的),然后再打开它们等等,直到所有内容都被预先加载。

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

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