预加载图像- JQuery

Preloading images - JQuery

本文关键字：JQuery 图像 加载      更新时间：2023-09-26

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

我记录image source，我注意到的是，第一个图像已经加载要使用，但second图像尚未加载要使用。这意味着我可以在chrome开发工具中preview图像，但第二张图像我无法预览。我只能把它加载到一个新标签中。但是当关闭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都被调用。

建议或想法?

看了一些preloading问题后，我发现:

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

来自另一个问题:使用jQuery预加载图像

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

相关文章：