Backbone buffer or load images in Memory

Question

I'm fetching a nested JSON object, which can be very large, and which contains some picture URLs. Something like:

[
    {
        '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'
    },
]

I will be loading different pictures from the model in a view every time, so I would like this images (or at least some of them) to be preloaded in memory or something like that, in order to improve my application's performance.

Is that possible in Backbone and/or Marionette?

score 1 · Answer 1 · answered May 07 '14 at 13:36

Server side optimization and client side optimization are 2 differents things.

If u want to preload pictures, means put them in cache, you will have to optimize server side (for example with php: enable gzip, memcache, etc).

Once the data are sent from server to client, you cannot resend them unless another request (mean a "talk" between server and client) is made again, in HTTP.

But what you can do client-side, if you have scrollable content, is lazy load images. Basically What you see on the page is rendered, like you would normally do. But when the user is scrolling, you do a request to load the additional images. In other words, if the user don't scroll, you limit the number of images to the minimum of what he sees. If the user scrolls, you ask for additional images through a asynchronous request.

If you want to fetch only some of the json data from server to backbone, you will have to manipulate and "cut" the json file server-side, since fetch() backbone method fetch all datas in the json.

Thank you for the answer. I think that you haven't understood the question (or I didn't ask properly). I don't want to Lazy load the images, I want the opposite of that. If you are watching a picture, and I know, that sometime later you will want to watch another one (wich url I have in my client side Model), why not get ready that image, if I'm not doing anything else in the meantime? — cor, May 07 '14 at 13:48
My bad. If you already know the url of the next image, call ``img.src`` of this image(s), when the user clicked on the current image. The dom of this image element be hidden. Then when users click on the navigation UI (next or something), make it visible. If the next image are plural, consider doing [jquery promises](http://api.jquery.com/promise/). [More on promises](http://stackoverflow.com/questions/6507181/using-jquery-load-with-promises). As a note jquery have ``.promise()`` , and underscore have ``_.defer()`` — isThisLove, May 07 '14 at 14:12

score 1 · Answer 2 · answered Jun 22 '16 at 15:06

A great javascript library called PreloadJS which handles the problem.

Example:

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

Backbone buffer or load images in Memory

2 Answers2