首页 > javascript > 如何在扩展脚本中预加载图像?

如何在扩展脚本中预加载图像? (How to NOT pre-load images in expand script?)

问题

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

如何进行以下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张大图像的页面上,因此只有在链接/拇指的鼠标悬停上加载完整图像才会使人有些崩溃浏览器,我有人抱怨这个。

我可以看到为什么这可能很难做到,因为它的工作原理是在加载时创建每个图像并隐藏它们,然后在悬停时显示它们,如果我发现/设法编写一个可接受的替代品我会使用它它:这似乎是我所拥有的。

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

解决方法

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

问题

I have a question that's bugging me quite a bit, been working on it a while with every road leading to dissapoints, and no suitable alternatives I've found.

How do I have the following NOT pre-load images?

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

Basically, it is perfect in almost every way for my purpose, though the one drawback is it often finds itself on pages with >1000 large images, so having it only load the full image on mouseover of the link/thumb would save people some crashed browsers, I've had people complain about that.

I can see why this could be difficult to do, as it works by creating every image on load and hiding them, then showing them on hover, with it said if I'd found/managed to write an acceptable alternative I'd of used it: this seems to be what I've got.

Great thanks to any helpful wizards in advance~

解决方法

I would approach it by only setting the image src on mouse over...

See this fiddle: 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);   
        }
    }
} 
相似信息