0

サムネイルがたくさんあるウェブサイトがあります。サムネイルは次のように定義されます。

<li>
    <a href='Pic/$gal/sized/$file'>
        <img src='Pic/$gal/thumb/$file' alt=''></img>
    </a>
</li>

それらに影響を与えるCSS：

グローバル img-CSS:

img {
    display: block; 
    margin: 0; 
    padding: 0; 
    border: none; 
    background: url('../images/load.gif') no-repeat center;
}

サムネイル用の特別な CSS コード:

.gallery ul li img {    
    width: 174px;
    height: 174px;
    padding: 4px;   
    border: 1px solid #FFFFFF;      
}

背景画像を読み込みアイコンとして使用したい。ただし、次の図でわかるように、画像が完全に読み込まれるまで、サムネイルの左上に常に醜いアイコンが表示されます。サムネイル自体と同じ大きさの背景画像を使用しようとしたため、醜いアイコンが重なってしまいました。しかし、これはうまくいきません。

http://s7.directupload.net/images/130225/v3l3hkfs.png

このアイコンを削除する方法を教えてください。

よろしく、 オリバー

4

3 に答える 3

3

それらはブラウザによって生成されるため、それらを取り除くことはできず、アイコンは使用するブラウザによって異なります。それらを表示させないためには、画像をキャンバスからレンダリングするためにjavascriptを使用するか、何らかのプリロードを実行する必要があります。

于 2013-02-25T17:56:34.273 に答える
2

空白の.pngまたは.gifを画像ソースとして追加し、画像が読み込まれたらsrcを変更できます。

編集：元のsrcを保存する良い方法は、データ属性を使用することです。

<img data-src='Pic/$gal/thumb/$file' src='blank.png' alt='' />
于 2013-02-25T18:02:12.560 に答える
0

どうもありがとうございました！

1px x1pxのtransparentblank.pngを作成してから、HTMLタグを変更しました。

echo "<li><a rel='gallery_group' href='Pic/$gal/sized/$file'><img data-src='Pic/$gal/thumb/$file' src='images/blank.png' alt=''></img></a></li> ";

ご覧のとおり、blank.pngが画像ソースです。blank.pngは非常に小さな画像であるため、非常にすばやく読み込まれます。次のステップは、ページが読み込まれた後に実際の画像が読み込まれることを確認することでした。

そのために、画像のすべての「src」属性を「data-src」属性の値に変更する単純なjavascript関数を作成しました。

<script type="text/javascript" 
function neueSrc () {
    var all = document.getElementsByTagName("img");
    for (var i=0, max=all.length; i < max; i++) {   
        all[i].src = all[i].getAttribute('data-src');
    }
}
</script>

この関数はbody-tagで実行されます。

<body onload="neueSrc()">

それはまさに私が欲しかったものです！迅速な対応と役立つヘルプをありがとうございました。

于 2013-02-26T09:34:39.377 に答える