jquery - 按顺序加载图像

Question

我正在构建一个包含大量大图像(10-40，~300kb/img)的网站，并寻找一种顺序加载(而不是显示!)它们的方法。

我已经有一段js，一旦前3个图像加载完毕(其他图像将在前3个图像显示时在后台加载)，它将显示并触发轮播，但是由于图像将异步加载，所以它有没有多大用处。

既然如此，有没有办法只有在上一张图片加载完成后才加载图片呢？

这是我的 html。

  <div class="item active">
    <img src="./img/1.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/2.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/3.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <div class="item">
    <img src="./img/4.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

还有我的js:

var numImagesLoaded = 0;
function incrementAndCheckLoading(){
    numImagesLoaded++;
    if(numImagesLoaded == 4){
      // trigger carousel
    }
}    

image1 = new Image();
image1.src = "http://cccctanger.com/test/img/1.jpg"
image1.onload = incrementAndCheckLoading;
image2 = new Image();
image2.src = "http://cccctanger.com/test/img/2.jpg"
image2.onload = incrementAndCheckLoading;
image3 = new Image();
image3.src = "http://cccctanger.com/test/img/3.jpg"
image3.onload = incrementAndCheckLoading;
image4 = new Image();
image4.src = "http://cccctanger.com/test/img/status.gif"
image4.onload = incrementAndCheckLoading;

编辑:轮播是基于 Bootstrap 的!

编辑 2 和解决方案:

我采用了 Luis Lorenzo 的解决方案，将每个图像在加载时附加到轮播中。唯一的问题:图像不会按顺序(1-2-3-4-...)附加，而是在加载时附加。考虑到这是一个我可以忍受的小问题，问题就解决了:))

谢谢大家!!

这是js:

$(document).ready(function () {
var images = ["http://cccctanger.com/test/img/1.jpg", "http://cccctanger.com/test/img/2.jpg", "http://cccctanger.com/test/img/3.jpg", "http://cccctanger.com/test/img/4.jpg",
"http://cccctanger.com/test/img/5.jpg"];    
var numImagesLoaded = 0;

$.each(images, function(k, v) {
    image_temp = new Image();
    image_temp.src = v;
    image_temp.onload = function () {
        $('#carousel-inner').append('<div class="item" 
    style="position: fixed; width: 100%; height: 100%; 
    background-image: url('+v+'); background-position: 50% 50%; 
    background-repeat: no-repeat no-repeat; -webkit-background-size: 100%; 
    -moz-background-size: 100%; -o-background-size: 100%; background-size:100%; 
    -webkit-background-size:cover; -moz-background-size:cover; 
    -o-background-size:cover; background-size:cover;"></div>');
        numImagesLoaded++;
        if(numImagesLoaded == 4)    {
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(350).fadeOut('slow', function(){
              $( "#carousel-example-generic" ).attr('data-ride', "carousel");
              $( ".item" ).first().addClass( "active" );
            }); // will fade out the white DIV that covers the website.
            $('body').delay(350).css({'overflow':'visible'});

            $('.carousel').carousel({
                pause: "false",
                interval: 10000
            });

            $('.carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
            $(window).on('resize', function() {
              $('.carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
            });
            }
        }
    });
});

以及相关的html:

<div id="preloader">
  <div id="status"></div>
</div>


<div id="carousel-example-generic" class="carousel slide" data-ride="0">

  <!-- Wrapper for slides -->
   <div class="carousel-inner" id="carousel-inner"></div>

</div>

Answer 1

尝试使用 JavaScript 加载图像并在完成后附加到 html。像这样的事情:

HTML

<div id="carousel">
</div>

JS(使用 jQuery)

$(document).ready(function () {
    var images = ["http://cccctanger.com/test/img/1.jpg", "http://cccctanger.com/test/img/2.jpg", "http://cccctanger.com/test/img/3.jpg", "http://cccctanger.com/test/img/4.jpg"];    
    var numImagesLoaded = 0;

    $.each(images, function(k, v) {
        image_temp = new Image();
        image_temp.src = v;
        image_temp.onload = function () {
            $('#carousel').append('<div class="item"><img width="100" height="100" src="'+v+'" alt="" /><div class="container"<div class="carousel-caption"></div></div></div>');
            numImagesLoaded++;
            if(numImagesLoaded == 4)    {
                //carousel
            }
        }
    });
});

示例:http://jsfiddle.net/hD3Sc/