主干缓冲区或在内存中加载图像答案

【问题标题】：Backbone buffer or load images in Memory主干缓冲区或在内存中加载图像
【发布时间】：2014-05-07 12:07:06
【问题描述】：

我正在获取一个嵌套的 JSON 对象，它可能非常大，并且包含一些图片 URL。比如：

[
    {
        'id':1,
        'title': 'Title 1',
        'picture': 'url/for/picture/one.png'
    },
    {
        'id':2,
        'title': 'Title 2',
        'picture': 'url/for/picture/two.png'
    },
    {
        'id':...,
        'title': '...',
        'picture': 'url/for/picture/....png'
    },
    {
        'id':n,
        'title': 'Title n',
        'picture': 'url/for/picture/n.png'
    },
]

我每次都会在视图中从模型中加载不同的图片，因此我希望将这些图片（或至少其中一些）预加载到内存或类似的东西中，以提高我的应用程序的性能。

这在 Backbone 和/或 Marionette 中是否可行？

【问题讨论】：

标签： backbone.js buffer marionette preload

【解决方案1】：

服务器端优化和客户端优化是两个不同的东西。

如果你想预加载图片，意味着将它们放在缓存中，你将不得不优化服务器端（例如使用 php：启用 gzip、memcache 等）。

一旦数据从服务器发送到客户端，除非在 HTTP 中再次发出另一个请求（意味着服务器和客户端之间的“对话”），否则您无法重新发送它们。

但是如果你有可滚动的内容，你可以在客户端做的是lazy load images。基本上，您在页面上看到的内容都会像您通常所做的那样被渲染。但是当用户滚动时，您会请求加载其他图像。换句话说，如果用户不滚动，您可以将图像的数量限制为他所看到的最少。如果用户滚动，您会通过异步请求请求额外的图像。

如果您只想从服务器获取部分 json 数据到主干，您将不得不在服务器端操作和“剪切”json 文件，因为fetch() 主干方法会获取 json 中的所有数据。

【讨论】：

感谢您的回答。我认为你没有理解这个问题（或者我没有正确地问）。我不想延迟加载图像，我想要相反的。如果您正在观看一张图片，并且我知道，稍后您会想要观看另一张图片（我在客户端模型中拥有的 url），如果我没有在同时？
我的错。如果您已经知道下一张图片的网址，请在用户点击当前图片时调用此图片的img.src。此图像元素的 dom 被隐藏。然后，当用户单击导航 UI（下一个或其他）时，使其可见。如果下一张图片是复数，请考虑使用jquery promises。 More on promises。注意 jquery 有 .promise() ，下划线有 _.defer()

【解决方案2】：

一个名为 PreloadJS 的出色 javascript 库可以处理该问题。

例子：

function loadImage() {
    var preload = new createjs.LoadQueue();
    preload.addEventListener("fileload", handleFileComplete);
    preload.loadFile("assets/preloadjs-bg-center.png");
}

【讨论】：