Question

我正在构建一个包含大量大图像（10-40，~300kb / img）的网站，并寻找一种顺序加载（不显示！）的方式。

我已经有一块js，一旦前三张图像被加载就会显示并触发旋转木马（其他的将在前三张显示时加载到背景上），因为图像会异步加载，它会有没什么用。

这样，有没有一种方法只在加载前一个图像时加载图像？

这是我的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的！

EDIT 2＆amp;解：

我已经改编了Luis Lorenzo的解决方案，将每个img附加到旋转木马上。唯一的问题是：图像不会按顺序追加（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="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/

按顺序加载图像

1 个答案:

HTML

JS（使用jQuery）