2つのイメージを1つのimgタグに順次読み込みます。

Question

<img />タグで2つのイメージを読み込みたいとします。最初の小さな画像はsrc属性で表示され、2番目の大きな画像はdata-src属性の内側に表示されますが、1つの画像はsrc属性に表示されます。小さなページが読み込まれて最初に表示され、背景に大きな画像の読み込みが完了した後、小さな画像に置き換えて大きな画像を見ることができるようにするときに、私はしたいです。私はdata-src属性から大きな画像を取り、src属性に大きな画像を配置するコードを持っています。

$(document).ready(function(){ 
    $("#image4").load(function(){ 
     var imgDefer = document.getElementsByTagName('img'); 
     for (var i=0; i<imgDefer.length; i++) { 
      if(imgDefer[i].getAttribute('data-src')) { 
       imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); 
      } } 
    }); 
}); 

大きな画像を読み込むのが長時間待たずに、最初に小さい画像を見たいと思っています。私は、ページの読み込み時に問題に直面している、それは並列に小さなと大きな画像をロードしています。あなたの情報のために、画像にドラッグとズームの機能があります。 現在のライブのコードはここにある：あなたがここに掲載http://virtualepark.com/new1/demo.html

Answer 1

コードは、サーバーにデプロイされていません - mousewheel -eventを使用して、いくつかの他のものがあります。あなたは隠されたタグにし、後にロードすることができ

//get all images 
$('img').each(function(i, img) { 
var img = $(img); 
//if they have a data-src 
if(img.attr('data-src')) { 
    //register for the load-event for the initial image 
    img.one('load', function() { 
    //if small image is loaded, begin loading the big image 
    //create new hidden image 
    var hiddenImg = new Image(); 
    hiddenImg.onload = function() { 
      //if the hidden image is loaded, set the src-attribute of the 
      //real image (it will show instantly) 
      img.attr('src', img.attr('data-src')); 
     }; 
     //trigger loading of the resource 
     hiddenImg.src = img.attr('data-src'); 
    }); 
    }); 
}); 

（クレジットLoad image from url and draw to HTML5 Canvasに）

Answer 2

：

可視画像のURLを設定し、バックグラウンドで、そのロードされた後に隠された大きな画像をロードしてくださいload completはそれらを変更します。

Answer 3

画像がロードされた後に読み込みを開始できます。

$('img').load(function(){ 
    var bigImgSrc = $(this).data('src'); 
    var img = $(this); 

    if(bigImgSrc != img.prop('src')){ 
     var bigImg =$('<img>').prop('src', bigImgSrc); 
     bigImg.load(function(){ 
     img.prop('src', bigImgSrc); 
     }); 
    } 
}); 

は、私はあなたがDOMへbigImgを追加する必要があるか、それはまた次のようにロードした場合はない場合は100％確信しています。 DOMに追加する必要がある場合は、bigImg.hide().appendTo('body')を使用してから、読み込み時に削除機能を使用してください。

またhttps://api.jquery.com/load-event/

編集を参照して、負荷機能はすべてのケースでは動作しないことに注意する必要があります前で無限ループにありました。コード例