預先加載將在fabric.js畫布上繪製的圖像

Question

您好，我正在構建一個網站，通過將鼠標懸停在網站上的文本內容上來在織物畫布上顯示圖像。有許多文字鏈接連接到許多不同的圖像。畫布上總是隻顯示一個圖像，但「銀行」中有很多圖像。在每次懸停調用時，我都會更改Fabric.js圖像對象的源參數。此外，圖像本身從不是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(); 
    }; 

，這是jQuery的觸發該changeImage（）

function emphasize(target, img_source) { 

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

Answer 1

第1步：前預緊所有的圖像應用開始：

How do image preloaders work?

步驟＃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();