ウェブページの画像を上から下に順番に読み込むことはできますか？

イメージを1つずつロードしたいと思います。添付の画像を参照してください。ウェブページの画像を上から下に順番に読み込むことはできますか？

まず負荷：画像01
すると、負荷の画像02、完全にロードされたイメージ01
完全にロードされたイメージ02、負荷の画像03のように...

.my-container { 
 
    width: 1060px; 
 
    margin: 0 auto; 
 
    padding: 50px; 
 
} 
 
img { 
 
    margin: 0 auto 35px; 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="my-container"> 
 
    <div class="portfolio"> 
 
    <img alt="image 01" width="960" height="640" src="http://i.imgur.com/wIfbFMu.jpg"> 
 
    <img alt="image 02" width="960" height="640" src="http://i.imgur.com/thiOajQ.jpg"> 
 
    <img alt="image 03" width="960" height="720" src="http://i.imgur.com/YgIxbVF.jpg"> 
 
    <img alt="image 04" width="960" height="640" src="http://i.imgur.com/Xt6R20O.jpg"> 
 
    <img alt="image 05" width="960" height="625" src="http://i.imgur.com/XENpTvq.jpg"> 
 
    <img alt="image 06" width="960" height="638" src="http://i.imgur.com/qBMOAgZ.jpg"> 
 
    </div> 
 
</div><!-- .my-container -->

私はjQueryソリューションを推奨しました。

出典

2017-04-20 Usman Arshad

良い図が、あなたのコードはありますか？ – nashcheez

[jQuery.imageloader（）]（http://beatak.github.io/jquery-imageloader/） – Alessandro

@nashcheezありがとう、コードが追加されました。 –

イメージを現在のインデックスでロードし、イメージがロードされたときにインデックスをインクリメントする関数を設定します。

data-src属性を使用すると、URLがsrc属性に入力されるまで画像が読み込まれなくなります。

画像が順次ロードされていることを示すコンソールログを追加しました。

$(function() { 
 
    var $images = $('.portfolio img'); 
 
    var lastLoadIndex = 0; 
 
    var loadNextImage = function() { 
 
     if ($images.length === lastLoadIndex) { 
 
      return; 
 
     } 
 
console.log('loading image at index ' + lastLoadIndex); 
 
     $images.eq(lastLoadIndex).attr('src', $images.eq(lastLoadIndex).attr('data-src')); 
 
     lastLoadIndex += 1; 
 
    }; 
 
    $images.on('load', loadNextImage); 
 
    loadNextImage(); 
 
});

.my-container { 
 
    width: 1060px; 
 
    margin: 0 auto; 
 
    padding: 50px; 
 
} 
 
img { 
 
    margin: 0 auto 35px; 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="my-container"> 
 
    <div class="portfolio"> 
 
    <img alt="image 01" width="960" height="640" data-src="http://i.imgur.com/wIfbFMu.jpg"> 
 
    <img alt="image 02" width="960" height="640" data-src="http://i.imgur.com/thiOajQ.jpg"> 
 
    <img alt="image 03" width="960" height="720" data-src="http://i.imgur.com/YgIxbVF.jpg"> 
 
    <img alt="image 04" width="960" height="640" data-src="http://i.imgur.com/Xt6R20O.jpg"> 
 
    <img alt="image 05" width="960" height="625" data-src="http://i.imgur.com/XENpTvq.jpg"> 
 
    <img alt="image 06" width="960" height="638" data-src="http://i.imgur.com/qBMOAgZ.jpg"> 
 
    </div> 
 
</div><!-- .my-container -->

出典

2017-04-20 16:03:45

それは素晴らしいです、私はそれをテストしている、私は答えを受け入れるだろう。素晴らしいコードをありがとう。 –

私はテストしました。本当に助けてくれてありがとう、私が期待したものとまったく同じものを作りました、あなたは天才です。 –

喜んで助けました。 –

jqueryのいくつかの行を上から下に順番に表示するだけです。スタックオーバーフロースニペットでは機能しませんが、ここで試すことができます：https://jsfiddle.net/wtgjhrv6/。

$('img').each(function(fadeInImg) { 
 
    $(this).delay(fadeInImg * 500).fadeIn(1000); 
 
    });

img { 
 
    display:none; 
 
    height:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
</div>

第二の要求負荷量がビューポート上にあるとき、あなたはより速くそれを行うにはwow.jsライブラリを使用することができます。あなたはここにhttps://jsfiddle.net/o9aLv51g/

new WOW().init();

img { 
 
    height:150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
 

 

 

 

 
<div> 
 
    
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg"> 
 
</div>

出典

2017-04-20 13:41:38 vlk

あなたの仕事に感謝しますが、私が期待していることではありません。 https://jsfiddle.net/o9aLv51g/1/ –

コメントを読んで、jsfiddleで試してください。最初はそれを順番にロードし、2番目のビューはビューポート上にあるイメージをロードします。私はそれをテストするためにjsのフィドルリンクを入れました。 – vlk

私はあなたのjsfiddleを試して、ビューポート上にあるときにイメージを順番に読み込みます。 ** ** – vlk

それを試すことができますあなたはhttp://www.appelsiini.net/projects/lazyloadプラグインを使用することができます。

<img class="lazy" data-original="img/example.jpg" width="640" height="480"> 

$(function() { 
    $("img.lazy").lazyload(); 
});

出典

2017-04-20 13:55:03

これは良いプラグインですが、私が期待していることをしません。ビューポート内に表示されているときにイメージをロードします。画像を上から下に順番にロードします。 –

その後、@vlkの回答はOKだと思われます –

ウェブページの画像を上から下に順番に読み込むことはできますか？

答えて

関連する問題