如何不在扩展脚本中预加载图像？

Question

我有一个问题困扰着我，我一直在努力解决每条导致失望的道路，但我没有找到合适的替代方案。

我如何获得以下未预加载图像？

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 个大图像的页面上，所以让它只在链接/拇指鼠标悬停时加载完整图像可以节省人们有些浏览器崩溃了，我曾有人抱怨过。

我明白为什么这可能很难做到，因为它的工作原理是在加载时创建每个图像并隐藏它们，然后在悬停时显示它们，它说如果我找到/设法编写了一个可接受的替代方案，我' d of used it：这似乎是我所拥有的。

提前感谢任何有用的向导~

Answer 1

我会通过只在鼠标悬停上设置图像 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);   
        }
    }
}