10

OK、私はこれについて頭がおかしくなっています。私はここでSOとグーグルでそれについて読みました、私はプリローダーセット（ここでSOにあります）さえ持っています、しかし私が見つけたプラグイン/コードのどれも私を助けませんでした。

私がやりたいのは、すべての画像がプリロードされるまで待ってから、他のすべてのJavaScriptコードを実行することです。私に関する限り、「読み込み中...」というメッセージが表示される場合があります（必須ではありません）。

実際、私は体の背景にかなり大きな画像があり、他の2つの画像も大きいので、それらをプリロードして、すぐに表示され、その醜い「読み込み」画像効果がないようにします。

これは私が今使っているものですが、良くありません：

$(document).ready(function()
{    
     preloadImages();
     ...some other code...

    function preloadImages(){
         imagePreloader([
            'images/1.png',
            'images/2.jpg',
            'images/3.png',                
         ]);
     } 

     function imagePreloader(arrayOfImages) {
         $(arrayOfImages).each(function(){
             (new Image()).src = this;
         });
     }   
}

わかりません。おそらく、このプリローダーを.ready（）のどこかで呼び出す必要がありますか？またはそのようなsth、助けてください...

ところで、はい、私もこの投稿を読みました。理由はわかりませんが、.ready（）の方が高速です:(

編集：
わかりました、それで最終的に私はこれを機能させることができました。私の問題？待機中のdivを間違って設定していました。これが私のコードです。すべての上に表示する読み込みdivがあり、すべての画像が読み込まれると（$（window）.load（function（）{...}）を使用）、提案されているように、そのdivを非表示にします。

<div id="loading">
    <div id="waiting">
        <img class="loadingGif" src="images/loading.gif">            
    </div>
</div>

#loading
{
   background-size: 100%;
   background-color:#000;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   z-index:999;
}  

#waiting
{
   margin-left: auto;
   margin-right: auto;    
   position:absolute;
   top: 39%;
   left: 27.81%;
   width: 45%;
   height: 150px;    
   background-color: #FFF;
   border: 12px solid #FF771C;
   text-align: center;
}

そして私のjQueryコードはこれです： 

$(window).load(function()
{    
    $('#loading').addClass('hidden');  
    ...
}
4

6 に答える 6

8

プリロードを試みる代わりに、スクリプトを実行することができます...

window.onload = function(){..}

すべての画像が読み込まれるまで、これは発生しません。

于 2011-05-03T13:12:50.790 に答える
7

子孫の画像が読み込まれたときにコールバックをアタッチできるwaitForImagesという名前のプラグインがあります。

あなたの場合、すべてのアセットがダウンロードされるのを待ちたい場合は、問題ない$(window).load()かもしれません。しかし、あなたは私のプラグインでそれを少しクールにすることができます:)

var loading = $('#loading');

$('body').waitForImages(function()
{    
    loading.addClass('hidden');  
}, function(loaded, total)
{
    loading.html(loaded + ' of ' + total);

});
于 2011-05-05T13:44:31.923 に答える
1

あなたが探しているのはjavascript：onLoad（）だと思います。これは、ブラウザの読み込みが完了するとすぐに呼び出されます。

于 2011-05-03T13:12:33.220 に答える
1

次のように読み込まれると、画像を表示できます。

<img src="hdimg.jpg" width="1920" height="1080" style="display:none;" id="img1">

<script type="text/javascript">
$('#img1').load(function(){
    $(this).css({'display':'block'})
});
</script>
于 2011-05-03T13:19:36.323 に答える
1

waitForImagesプラグインは興味深いものですが、解決策は次の方法で実現できます。

    var counter = 0;
    var size = $('img').length;

    $("img").load(function() { // many or just one image(w) inside body or any other container
        counter += 1;
        counter === size && $('body').css('background-color', '#fffaaa');
    }).each(function() {
      this.complete && $(this).load();        
    });
于 2016-04-01T19:21:29.540 に答える
0

最良のjQueryオプションは、ajaxget呼び出しを使用することだと思います。

$.get('image.png', {}, function(){
    // Do whatever you want here, this wont execute until image.png is preloaded
});
于 2013-02-12T03:40:14.800 に答える