如何在擴展腳本中預先加載圖像？

我有一個問題，這個問題讓我感到不安，一直在努力工作，每一條道路都讓我失望，而且我找不到合適的替代方案。如何在擴展腳本中預先加載圖像？

我如何得到以下不預載圖像？

var oStyle = document.createElement('style'); 
oStyle.setAttribute('type','text/css'); 
var css = 'a.hovex-imageview { -moz-outline: 1px dotted red; }'; 
css += 'a.hovex-imageview img.hovex-imageview { display: none;position: fixed;left: 15%;right: 85%;top:15%;bottom:85%;max-width: 100%;margin: 0;border: none; }'; 
css += 'a.hovex-imageview:hover img.hovex-imageview { display:block;max-width:80%;max-height:80%; }'; 
oStyle.innerHTML = css; 
document.getElementsByTagName('head')[0].appendChild(oStyle); 

var aElm = document.getElementsByTagName('a'); 
for (i=0; i<aElm.length; i++) { 
    if (aElm[i].href.match(/\.(jpg|jpeg|gif|png)$/)) { 
     var oImg = document.createElement('img'); 
     oImg.setAttribute('src',aElm[i].href); 
     oImg.setAttribute('class','hovex-imageview'); 
     aElm[i].appendChild(oImg); 
     aElm[i].setAttribute('class','hovex-imageview');  
    } 
}

基本上，它是在幾乎每一個方式爲我的目的完美的，雖然一個缺點是它經常發現自己與「1000張大圖片的網頁，所以其只加載鏈接的鼠標懸停的完整圖像/拇指可以爲人們挽救一些崩潰的瀏覽器，我曾有人抱怨過這一點。

我明白了爲什麼這可能很難做到，因爲它的工作原理是創建加載的每個圖像並隱藏它們，然後在懸停時顯示它們，並說明如果我找到/設法寫出可接受的替代方案I '使用它：這似乎是我得到的。

十分感謝任何有用的嚮導提前〜

來源

2013-04-20 Crusty Smith

我也只會設置在鼠標移到圖片src接近它...

看到這個小提琴：http://jsfiddle.net/LD8t6/

var aElm = document.getElementsByTagName('a'); 
for (i=0; i<aElm.length; i++) { 
    if (aElm[i].href.match(/\.(jpg|jpeg|gif|png)$/)) { 
     var oImg = document.createElement('img'); 
     oImg.setAttribute('class','hovex-imageview'); 
     oImg.setAttribute('src',''); 
     aElm[i].appendChild(oImg); 
     aElm[i].setAttribute('class','hovex-imageview'); 
     aElm[i].onmouseover = function() { 
      oImg.setAttribute('src', this.href); 
     } 
    } 
}

來源

2013-04-20 15:16:47

感謝答覆，雖然沒有喜悅。我曾嘗試過一些東西，我嘗試過的所有東西都停止了這個腳本。控制檯日誌： SyntaxError：missing;在聲明之前但是我完全沒有看到它：/ – 2013-04-20 15:54:11

哦，在我的代碼中出現了語法錯誤，該事件附加。我已經更新了它，它應該工作。 – 2013-04-21 04:41:30

這是排序，定位丟我，你的腳本加載在頁面底部的圖像，我沒有注意到它，它很好，謝謝:) – 2013-04-21 13:22:23

如何在擴展腳本中預先加載圖像？

回答

相關問題