Question

我有一个问题让我烦恼不已，一直在研究导致失败的每条道路，而且找不到合适的替代方案。

如何进行以下NOT预加载图像？

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使用它：这似乎是我所拥有的。

非常感谢提前任何有用的向导〜

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);   
        }
    }
}

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

1 个答案: