Question

我正在使用Kinetic.Layer将图片加载到canvas。单击print按钮时会找到我遇到的问题，它会从另一个文件中抓取图像并将其显示在要打印的白页上。第一个图像将始终加载，但第二个图像将不会加载，直到我关闭print并再次单击它。

我记录了image source，我注意到的是第一张图片已加载使用，但second图片尚未加载使用。这意味着我可以preview chrome开发人员工具中的图像，但是我无法预览第二张图像。我只能将其加载到新标签中。但是当关闭print部分并重新打开它时，我现在可以预览这两个图像，这使我得出结论，在调用Kinetic.Layer时还没有绘制出第二张图像。所以我的问题是，如何将图像预加载到位？

继承我的Kinetic代码：

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

请注意，对于我加载到print部分的每张图片，都会调用此displayFloor_printing。

建议或想法？

Answer 1

在查看了preloading个问题后，我发现：

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

来自另一个问题：Preloading images with jQuery

它的作用是将图像插入到DOM中，使浏览器知道它的存在并使其正确缓存。否则，图像仅存在于内存中，仅适用于单页应用程序。

希望这有助于其他任何人。

预加载图像 - JQuery

1 个答案: