mithril avoiding to reload image

Question

I am using mithril 0.2.2-rc.1. I saw in the routing documentation : Routing is a system that allows creating Single-Page-Applications (SPA), ie applications that can go from one page to another without causing a full browser refresh.

Indeed when I am routing to the same page with different parameter only the part that I want to change is refresh expect this :

m("img[src='assets/images/logo.png'][alt=''][width='100']")

I can see in the network communication that the image is reloaded (another GET request).

Is there a way to avoid that?

route.js

m.route.mode = "pathname";

m.route(document.getElementById('app'), '/', {
    '/': main,

    '/modelling/:level': main

})

Answer 1

It's difficult to see how the two pieces of code fit together, but two things suggest themselves:

1. Every change of route (even if that change results in the same route entry, eg /modelling/x to /modelling/y ) will result in the entire DOM being regenerated. You can prevent this behaviour by calling m.redraw.strategy( 'diff' ) in each route component's controller.
2. Repeatedly requesting the same resource does not lead to extra calls to the server: a multi page site with every page requesting the same JS and CSS will only load those resources once, and will hit browser cache on subsequent requests. Thus repeatedly asking for the same image resource will not generate any new calls to the server.

Answer 2

If you check the documentation of the m method you will see that the config attribute lets you retain elements across redraws. So this should work for you:

m('img', {config: function persist(el, isInit, context)}) {
    context.retain = true;
}