0

私はかなり悩まされている質問があります。すべての道が失望につながり、適切な代替案が見つかりませんでした。

次の画像をプリロードしないようにするにはどうすればよいですか?

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

基本的に、私の目的にはほぼすべての点で完璧ですが、1つの欠点は、1000を超える大きな画像を含むページにあることが多いため、リンク/サムのマウスオーバーで完全な画像のみをロードすると、クラッシュする人が少なくなりますブラウザ、私は人々にそれについて不平を言いました。

ロード時にすべての画像を作成して非表示にし、ホバー時に表示することで機能するため、これが難しい理由がわかります。 it: これは私が持っているもののようです。

事前に役立つウィザードに感謝します〜

4

1 に答える 1