Preloading images - JQuery

Question

I am using a Kinetic.Layer to load up images into a canvas. The issue I am having is located when clicking a print button, it grabs images from another file and displays them on a white page to be printed. The first image will always load but the second image wont be loaded until I close the print and click it again.

I log the image source and something I notice is that the first image is already loaded to be used but the second image has not been loaded to be used. What this means is I can preview the image in chrome developer tools but with the second image I cannot preview. I can only load it up into a new tab. But when closing out of the print section and reopening it, I can now preview both images which brings me to my conclusion that the second image has not been drawn out yet to be used when calling Kinetic.Layer. So my question is, how can I preload the images into place?

Heres my Kinetic code:

code.prototype.displayFloor_printing = function(floor){

var ifpc = this;
$(".print-floors").append("<div class='ifp_container_printing ifp_container_printing_"+ floor.ifpf_id +"' style='width:100%;' id='ifp_container_printing_"+ floor.ifpf_id +"'></div>")
width = $(".ifp_container_printing").width(),
height = $(".ifp_container_printing").height();

var stage = new Kinetic.Stage({
    container: 'ifp_container_printing_' + floor.ifpf_id,  
    width:width,   
    height:height   
});
floorLayer = new Kinetic.Layer();

optionLayer = new Kinetic.Layer();
ifpc.setIfpOptionLayer(optionLayer);
floorObj = new Image();
floorObj.src = "images/uploaded/"+floor.ifpf_image;
console.log(floorObj.src);//<!-- this is the source that I am having logged

var imgWidth = 
        floorObj.width,
        imgHeight = 
        floorObj.height,
        aspectRatio =   
        imgWidth/imgHeight, 
        rar =  
        imgHeight/imgWidth;

var floorImage = new Kinetic.Image({
      x: 0,
      y: 0,
      image: floorObj,
      width: imgWidth,
      height: imgHeight          
});

stage.setHeight(imgHeight);
stage.setWidth(imgWidth);

floorLayer.add(floorImage);

stage.add(floorLayer);

ifpc.setIfpStage(stage); //<!-- add additional options

stage.draw();   
ifpc.setIfpActiveFloor(floor);
ifpc.refreshOptions();
}

Please note that for every image I am having loaded into the print section this displayFloor_printing is being called.

Suggestions or thoughts?

score 0 · Answer 1 · edited May 23 '17 at 10:33

After looking over some preloading questions I found:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

from another question: Preloading images with jQuery

What this does is it inserts images into the DOM which makes the browser aware of its existence and for it to be properly cached. Otherwise, the image only exists in memory which only works for single page apps.

Hope this helps anyone else.

Preloading images - JQuery

1 Answers1