处理图像预加载的最佳方法

Question

所以我正在构建一个像pinterest一样的应用程序，它大量使用无限的feed。每张卡都有一个与之关联的图像，我现在正在探索尽可能快地进行无限滚动的选项。

对于技术人员，我使用backbone.marionette，isotope和imagesLoaded。

我的实现流程如下：

1. 抓住Feed onscroll活动
2. 如果页面高于X％滚动，则触发自定义infinitescroll事件
3. 为特定卡片组制作ajax请求
4. 根据返回的数据数组中的每个对象创建卡Marionette.ItemView和关联模型
5. 将每个视图附加到Marionette.CollectionView州
的Feed hidden
6. 等到集合中的每个视图都附加到Marionette.CollectionView
7. 将imagesLoaded听众注册到Marionette.CollectionView
8. 在imagesLoaded事件中，重新加载同位素网格并fadeIn hidden ItemViews

在从Amazon S3服务器下载所有卡片图像后，此处的瓶颈正在等待imagesLoaded事件触发。我能想到的一个主要优化是图像预加载。

我可以弄清楚下一组的AWS URL，所以我知道我可以'预先下载'图像并为每张即将推出的卡创建一个<img>元素，但我对这个有点模糊实际上，它是如何与图像缓存联系起来的，以及这是否是最好的实现方法。

非常感谢任何反馈或建议！

Answer 1

我不太确定你到底想要完成什么。 如果您想尽快显示您的Feed，并在图片加载后执行某些操作，那么最简单的方法就是不使用imagesLoaded，只需在ItemView中收听'load'事件，例如events：{“load img”：“onImageLoaded”}。或者，更有可能，因为您需要在集合视图中捕获它：

 triggers: {"load img" : "image:loaded" }

但是，如果您想在获得图像后才显示卡片，那么最简单的方法是预取图像：

img = new Image()
img.onload = function() { /*create the view*/ };
img.src = "s3 url";