依次加载图像 [英] Loading images sequentially

查看：149
本文介绍了依次加载图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要建一个大量大图（10-40，〜300KB / IMG）的网站，并相继找负载的方式（不显示！）他们。

我已经有一段JS将显示，一旦前3图像已被载入触发转盘（其余将加载在前面3显示的背景），buuut的图像将异步加载，它具有没有太大的用处。

既然如此，有没有加载图像只有当previous人被加载的一种方式？

下面是我的HTML。 

 ＆LT; D​​IV CLASS =项目活动＆GT;
    ＆LT; IMG SRC =./ IMG / 1.JPGALT =/＆GT;
    ＆LT; D​​IV CLASS =容器＆GT;
      ＆LT; D​​IV CLASS =旋转木马字幕＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    ＆LT; IMG SRC =./ IMG / 2.JPGALT =/＆GT;
    ＆LT; D​​IV CLASS =容器＆GT;
      ＆LT; D​​IV CLASS =旋转木马字幕＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    ＆LT; IMG SRC =./ IMG / 3.JPGALT =/＆GT;
    ＆LT; D​​IV CLASS =容器＆GT;
      ＆LT; D​​IV CLASS =旋转木马字幕＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    ＆LT; IMG SRC =./ IMG / 4.JPGALT =/＆GT;
    ＆LT; D​​IV CLASS =容器＆GT;
      ＆LT; D​​IV CLASS =旋转木马字幕＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;

和我的JS：

  VAR numImagesLoaded = 0;
功能incrementAndCheckLoading（）{
    numImagesLoaded ++;
    如果（numImagesLoaded == 4）{
      //触发旋转木马
    }
}此搜索=新的图像（）;
image1.src =htt​​p://cccctanger.com/test/img/1.jpg
image1.onload = incrementAndCheckLoading;
IMAGE2 =新的图像（）;
image2.src =htt​​p://cccctanger.com/test/img/2.jpg
image2.onload = incrementAndCheckLoading;
图像3 =新的图像（）;
image3.src =htt​​p://cccctanger.com/test/img/3.jpg
image3.onload = incrementAndCheckLoading;
图片4 =新的图像（）;
image4.src =htt​​p://cccctanger.com/test/img/status.gif
image4.onload = incrementAndCheckLoading;

编辑：旋转木马是基于引导

修改2及SOLUTION

我已经适应路易斯·洛伦佐的解决方案，以每IMG追加到传送带作为其加载。唯一的问题：图像不会为了（1-2-3-4 -...）追加，但因为它们是加载。考虑到这是一个小问题，我可以住在一起，问题就解决了​​：））

谢谢你们!!

这里的JS：

  $（文件）。就绪（函数（）{
变种图像= [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];
变种numImagesLoaded = 0;$。每个（图片，功能（K，V）{
    image_temp =新的图像（）;
    image_temp.src = V;
    image_temp.onload =功能（）{
        $（'＃旋转木马-内'）追加（'＆LT; D​​IV CLASS =项
    风格=的位置是：固定;宽度：100％;身高：100％;
    背景图像：网址（'+ V +'）;背景位置：50％50％;
    背景重复：不重复不重复; -webkit-背景尺寸：100％;
    -moz背景尺寸：100％; -o-背景尺寸：100％;背景尺寸：100％;
    -webkit-背景大小：盖; -moz-背景大小：盖;
    -o-背景大小：盖;背景大小：覆盖;＆GT;＆LT; / DIV＆GT;'）;
        numImagesLoaded ++;
        如果（numImagesLoaded == 4）{
            $（'＃状态'）淡出（）。 //将首先淡出加载动画
            $（'＃preloader'）。延迟（350）.fadeOut（'慢'，函数（）{
              $（＃旋转木马，例如，通用）.attr（'数据骑，旋转木马）;
              $（.item）。首先（）addClass（活动）。
            }）; //将淡出白色DIV，涵盖了网站。
            $（'身体'）延迟（350）的.css（{'溢出'：'看见'}）;            $（'。转盘'）。转盘（{
                暂停：假，
                间隔：10000
            }）;            $（'转盘'）的CSS（{'保证金'0'宽'：$（窗口）.outerWidth（），高度：$（窗口）.outerHeight（）}）;
            $（窗口）。在（'调整'，函数（）{
              $（旋转木马。）的CSS（{'宽度'：$（窗口）.outerWidth（），高度：$（窗口）.outerHeight（）}）;
            }）;
            }
        }
    }）;
}）;

和相关HTML：

 ＆LT; D​​IV ID =preloader＆GT;
  ＆LT; D​​IV ID =状态＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =旋转木马，例如，通用类=旋转木马幻灯片数据骑=0＆GT;  ＆LT;！ - 包装幻灯片 - ＆GT;
   ＆LT; D​​IV CLASS =旋转木马，内部ID =旋转木马-内＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;


解决方案

使用JavaScript尝试加载图像并追加到html当它完成。事情是这样的：

HTML 

 ＆LT; D​​IV ID =旋转木马＆GT;
＆LT; / DIV＆GT;

JS（使用jQuery）

  $（文件）。就绪（函数（）{
    变种图像= [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];
    变种numImagesLoaded = 0;    $。每个（图片，功能（K，V）{
        image_temp =新的图像（）;
        image_temp.src = V;
        image_temp.onload =功能（）{
            $（'＃旋转木马'）追加（'＆LT; D​​IV CLASS =项＆GT;＆LT; IMG WIDTH =100HEIGHT =100SRC =+ V +'ALT =/＆GT;＆LT ; DIV CLASS =容器＆LT; D​​IV CLASS =旋转木马字幕＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;'）;
            numImagesLoaded ++;
            如果（numImagesLoaded == 4）{
                //转盘
            }
        }
    }）;
}）;

例如： http://jsfiddle.net/hD3Sc/

I'm building a site with a large amount of big images (10-40, ~300kb/img), and looking for a way of loading (not displaying!) them sequentially.

I already have a piece of js that will display and trigger the carousel once the first 3 images have been loaded (the others will load on the background while the first 3 display), buuut as the images will load asynchronously, it has no much use.

Being so, is there a way of loading the images only when the previous one has been loaded?

Here's my 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>

And my 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;

EDIT: The carousel is bootstrap based!

EDIT 2 & SOLUTION:

I've adapted Luis Lorenzo's solution to append every img to the carousel as its loaded. The only problem: the images won't append in order (1-2-3-4-...) but as they are loaded. Considering this is a little issue I can live with, the problem is solved : ))

Thanks guys!!

Here's the 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()});
            });
            }
        }
    });
});

And relevant 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>

解决方案

Try loading images using javascript and append to html when it finish. Something like this:

HTML

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

JS (using 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
            }
        }
    });
});

Example: http://jsfiddle.net/hD3Sc/

这篇关于依次加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆