javascript - Preload images that will be drawn on fabric.js canvas -

hello i'm building website display images on fabric canvas hovering on text content on site. there many text links connected many different images. there 1 image on canvas being displayed, there many in 'bank'. @ every hover call change source parameter of fabric.js image object. image never part of dom.

my problem when page loads , user hovers on link takes @ least 2 'hovers', meaning user has enter , leave text link area @ least twice, display image.

first hover-over downloads image, , when image loaded second hover-over displays it.

is there way how preload these images pop on first hover?

i'm using fabric.js image object.

this how display first image.

fabric.image.fromurl(source, function(img) {          cnvs.add(img); }); 

and how change source parameter

    function changeimage(new_img_source) {         var tmp=cnvs.item(0).getelement();         var src = tmp.src;                tmp.setattribute("src", img_source);           cnvs.renderall();     }; 

and jquery fires changeimage()

    function emphasize(target, img_source) {          $(target).hover( function() {             changeimage(img_source);         });     }; 

step#1: preload images before app begins:

how image preloaders work?

step#2: when needed, change image fabricjs using img object.

 // given have preloaded images imgs[] array  // load img[1] fabricjs img object  img.setelement( imgs[1]; );  canvas.renderall();