预加载将在 fabric.js canvas 上绘制的图像

Question

你好，我正在建立一个网站，我通过将鼠标悬停在网站上的文本内容上来在结构 canvas 上显示图像。许多文本 link 连接到许多不同的图像。在 canvas 上总是只有一张图片被显示，但在 'bank' 上却有很多。在每次悬停调用时，我都会更改 Fabric.js 图像对象的源参数。此外，图像本身绝不是 DOM.

的一部分

我的问题是，当页面加载并且用户将鼠标悬停在 link 上时，它至少需要两次 'hovers'，这意味着用户必须输入和离开文本 link区域至少两次，以实际显示图像。

第一次悬停下载图像，当加载图像时，第二次悬停显示它。

有什么方法可以预加载这些图像，以便它们在第一次悬停时弹出？

我正在使用 Fabric.js 图片对象。

这是我显示第一张图片的方式。

fabric.Image.fromURL(source, function(img) {

        cnvs.add(img);
});

这就是我更改源参数的方式

    function changeImage(new_img_source) {
        var tmp=cnvs.item(0).getElement();
        var src = tmp.src;      

        tmp.setAttribute("src", img_source); 

        cnvs.renderAll();
    };

这是触发 changeImage()

的 Jquery

    function emphasize(target, img_source) {

        $(target).hover( function() {
            changeImage(img_source);
        });
    };

Answer 1

第 1 步：在应用开始之前预加载所有图像：

步骤#2：需要时，更改 FabricJS 用于 img 对象的图像。

 // given you have preloaded images into the imgs[] array
 // load img[1] into the fabricJS img object
 img.setElement( imgs[1]; );
 canvas.renderAll();

预加载将在 fabric.js canvas 上绘制的图像

Preload images that will be drawn on fabric.js canvas

javascript

jquery

preload

fabricjs