0

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~

4

1 回答 1

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);   
        }
    }
}
于 2013-04-20T15:16:47.230 回答