3

50 個の小さな画像 (16x16px から 50x50px まで) を含む Web ページにこのスクリプトを挿入しました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').css('opacity', '0.0').load(function(){
    $(this).animate({'opacity': '1.0'});
});         
});
</script>

問題は、すべての画像が読み込まれるわけではなく、一部が表示されないことです。

なんで ？

4

5 に答える 5

4

一部の画像は、不透明度を 0 に設定したときに既に読み込まれている可能性があります。そのため、それらのonloadハンドラーは既に実行されており、再度表示する機会がありません。

于 2012-05-29T07:56:58.630 に答える
3

一部の画像がキャッシュから読み込まれている可能性があります。イメージがキャッシュからロードされた場合、loadイベントはイベントの前に発生しdom readyます。これを行う1つの方法は

$('img').css('opacity', '0.0').one('load',function(){
    $(this).animate({'opacity': '1.0'});
}).each(function() {
   if(this.complete) $(this).load();
});

これは画像をループし、それらがキャッシュから読み込まれたかどうかを確認し、そうであれば、それらの画像の読み込みイベントを発生させます。

また、$.oneを使用してイベント ハンドラーを 1 回だけ実行しています。これは、複数回実行する必要がないためです。

アップデート：

if(this.complete)画像が既にロードされているかどうかを確認し（キャッシュされている場合）、ロードされている場合はloadすぐにそれらのイベントを発生させます。

キャッシュからロードされていないものは、ロード後にブラウザがloadイベントを発生させます。

したがって、上記のコードは、キャッシュされているかどうかに関係なく、すべての画像をカバーします。

于 2012-05-29T08:05:37.553 に答える
1

opacityJavaScript 経由ではなく、CSS スタイル内でデフォルト値を設定します。その後、 を使用しますanimate。

<style>
     img { opacity:0 }
</style>

<script type="text/javascript">
$(document).ready(function(){
    $('img').load(function(){
        $(this).animate({'opacity': '1.0'});
    });         
});
</script>
于 2012-05-29T08:01:40.727 に答える
0

次のようにcssで画像の不透明度をより適切に設定できます

img {
opacity:0
}

そして、あなたのコードを使用してください

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').load(function(){
    $(this).animate({'opacity': '1.0'});
});         
});
</script>
于 2012-05-29T08:02:44.030 に答える
0

プリロード画像のJavaScriptコードを使用...

<script type="text/javascript">
if (document.images) {
    img1 = new Image();
    img1.src = "image.jpg";
    img2 = new Image();
    img2.src = "image2.jpg";
}
</script>

そして今、すべての画像がクライアントマシンにプリロードされ、常に表示されます....

また

柔軟な配列

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}
于 2012-05-29T07:59:08.897 に答える