web-dev-qa-db-ja.com

jQuery、JavaScript、HTML：他のすべてが読み込まれた後に画像を読み込む方法は？

皆さん、私は非常に複雑なページで、スクリプトが多く、読み込み時間がかなり長くなっています。そのページの上に、jquery Nivo Slider（http://nivo.dev7studios.com/）を実装したいと思います。

ドキュメントには、div＃slider内のスライダーのすべての画像をリストする必要があると書かれています

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

ただし、1000x400pxの画像が10個ある場合があります。これらの画像は、ページが読み込まれるときに読み込まれます。彼らは私のヘッダーにあるので、これにはかなり時間がかかるかもしれません。

Jqueryスライダープラグイン（nivoスライダーなど）を使用する方法を探していますが、動的に画像をロードするか、ページ上の他のすべてがロードされた後にそれらの画像をすべてロードします。

どうすればそれを解決できるでしょうか？

ページ上の他のすべてがロードされた後にJavaScriptプロセスを開始する方法さえありますか？問題の解決策がある場合は（jquery ajax load（）メソッドを使用）...しかし、他のすべてが読み込まれるのを待ってから、すべての画像でスライダーを開始する方法がわかりません。

javascriptjqueryimageloading
18
matt

これが私たちがやったことと素晴らしい働きです。 srcのimg属性の設定をスキップして、img-locationを偽の属性lsrcに追加しました。次に、lsrc値を使用して動的画像をロードし、実際の画像のsrcを、ロードされた後にのみ設定します。

読み込みが高速になるのではなく、ページに完全にダウンロードされたときにのみ画像を表示するので、ユーザーは煩わしいハーフロードの画像を見る必要がありません。プレースホルダー画像は、実際の画像の読み込み中に使用できます。

これがコードです。

_ $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });
_

編集：トリックは、そのソースが一時的なimgにロードされた場合にのみsrc属性を設定することです。 $(img).load(fn);がそれを処理します。

33
simplyharsh

Xhalentの回答に加えて、jQueryで.append（）関数を使用して、DOMに追加します。

あなたのHTMLはただ持っているでしょう：

<div id="slider">
</div>

そして、あなたのjqueryは次のようになります：

jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});
4
Matt Asbury

チェックアウト jquery load（）イベント、グラフィックを含むすべてを待機します

$(window).load(function () {
  // run code
});

ロード時には、次を使用してイメージをロードできます。

var image = new Image();
image.src = "/path/to/huge/file.jpg";

画像にonload関数を追加することもできます

image.onload = function() {
  ...
}
1
Han Dijk

最適な使用方法はb -lazy jsです。 bLazyは軽量の遅延読み込み画像スクリプトです（1.2KB未満に縮小およびgzip圧縮）。それはあなたがあなたの帯域幅とサーバー要求を節約することができるようにあなたがあなたのイメージを遅延ロードしてマルチサービスすることを可能にします。ユーザーはページ全体を閲覧しない場合、ロード時間が短縮され、ロードされたデータが保存されます。オプション、関数、例の完全なリストについては、ブログの投稿 http://dinbror.dk/blog/blazy にアクセスしてください。

次の例は、画像コールバックを使用したレイジーロードのマルチサービングレスポンシブ画像の例です:)デバイスの幅が420ピクセル未満の場合、画像の軽量で小さいバージョンが提供されます。画像が読み込まれると、コールバック内のローダーが削除されます。

HTMLで

 <img class="b-lazy"
     src="placeholder-image.jpg"
     data-src="image.jpg"
     data-src-small="small-image.jpg"
     alt="Image description" />

Jsで

var bLazy = new Blazy({
        breakpoints: [{
        width: 420 // Max-width
          , src: 'data-src-small'
    }]
      , success: function(element){
        setTimeout(function(){
        // We want to remove the loader gif now.
        // First we find the parent container
        // then we remove the "loading" class which holds the loader image
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\bloading\b/,'');
        }, 200);
        }
   });

例

0
TarangP