CODEWITHSUNDEEP
backbone.jsbuffermarionettepreload
cor
cor

Reputation: 3393

Backbone buffer or load images in Memory

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?

Upvotes: 1

Views: 524

Answers (2)

cor
cor

Reputation: 3393

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");
}

Upvotes: 1

isThisLove
isThisLove

Reputation: 269

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.

Upvotes: 1

Related Questions