Question

您好我正在建立一个网站，我将网页上的文字内容悬停在布料画布上。有许多文本链接连接到许多不同的图像。画布上始终只显示一个图像，但“银行”中有许多图像。在每次悬停调用时，我都会更改Fabric.js图像对象的source参数。此外，图像本身也不是DOM的一部分。

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

首先悬停下载图像，当图像加载时，第二个悬停显示它。

有没有办法如何预加载这些图像，以便它们在第一次悬停时弹出？

我正在使用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：在应用开始前预加载所有图片：

How do image preloaders work?

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

/var/lib/my/access.log

预加载将在fabric.js canvas

1 个答案: