JS实现图片预加载无需等待

时间 2019-11-16

原文原文链接

网站开发时常常须要在某个页面须要实现对大量图片的浏览;用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其余图片

网站开发时常常须要在某个页面须要实现对大量图片的浏览，若是考虑流量的话，大能够像pconline同样每一个页面只显示一张图片，让用户每看一张图片就须要从新下载一下整个页面。不过，在web2.0时代，更多人愿意用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其余图片。
知道了一张图片的地址，须要把它在一个固定大小的html容器（能够是div等）里边显示出来，最重要的固然是须要知道这张即将显示的图片的宽和高，而后再结合容器的宽和高，按照必定的缩放比例使图片显示出来。所以，实现图片预加载就成为图片浏览器的核心功能了。
作过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让图片下载到本地，让浏览器缓存起来。这时，通常都会用到js里边的Image对象。通常的手段无非这样：javascript

function preLoadImg(url) {

var img = new Image();

img.src = url;

}

经过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。实际上，这里用到的预下载功能也和这基本一致。图片预下载下来后，经过 img的width和height属性，就能知道图片的宽和高了。可是须要考虑到，在作图片浏览器功能时，图片都是实时显示的。好比你点了显示的按钮，这个时候才会调用上边相似的代码来加载图片。所以，若是你直接用img.width的时候，图片尚未彻底下载下来。所以，须要用一些异步的方法，等到图片下载完毕的时候才会再对img的width和height进行调用。
实现这样的异步方法实际上不难，图片的下载完毕事件也很简单，就是简单的onload事件。所以，咱们能够写出下面的代码：css

function loadImage(url, callback) {

var img = new Image();

img.src = url;

img.onload = function(){ //图片下载完毕时异步调用callback函数。

callback.call(img); // 将callback函数this指针切换为img。

};

}

好了，再来写一个测试用例html

function imgLoaded(){

alert(this.width);

}

   <input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/> 
 

在firefox中测试一下，发现不错，果真和预想的效果同样，在图片下载后，就会弹出图片的宽度来。不管点击多少次或者刷新结果都同样。
不过，作到这一步，先别高兴太早——还须要考虑一下浏览器的兼容性，因而，赶忙到ie里边测试一下。没错，一样弹出了图片的宽度。可是，再点击load的时候，状况就不同了，什么反应都没有了。刷新一下，也一样如此。
通过对多个浏览器版本的测试，发现ie六、opera都会这样，而firefox和safari则表现正常。其实，缘由也挺简单的，就是由于浏览器的缓存了。当图片加载过一次之后，若是再有对该图片的请求时，因为浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，一样会引发图片的onload事件，而ie和opera则忽略了这种同一性，不会引发图片的onload事件，所以上边的代码在它们里边不能得以实现效果。
怎么办呢？最好的状况是Image能够有一个状态值代表它是否已经载入成功了。从缓存加载的时候，由于不须要等待，这个状态值就直接是代表已经下载了，而从http请求加载时，由于须要等待下载，这个值显示为未完成。这样的话，就能够搞定了。
通过一些分析，终于发现一个为各个浏览器所兼容的Image的属性——complete。因此，在图片onload事件以前先对这个值作一下判断便可。最后，代码变成以下的样子：java

function loadImage(url, callback) {

var img = new Image(); //建立一个Image对象，实现图片的预下载

img.src = url;

        if (img.complete) { // 若是图片已经存在于浏览器缓存，直接调用回调函数 
 

callback.call(img);

return; // 直接返回，不用再处理onload事件

}

img.onload = function () { //图片下载完毕时异步调用callback函数。

callback.call(img);//将回调函数的this替换为Image对象

};

通过这么一番折腾，总算是让各个浏览器都能知足咱们的目标了。虽然代码很简单，可是却把图片浏览器中最核心的问题解决掉了，接下来你所要作的，仅仅是图片如何呈现的问题了接下来看看另一种方法：web

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>js 实现图片预加载 加载完后执行动做</title> 
</head> 
<style type="text/css"> 
<!-- 
*html{ 
margin:0; 
padding:0; 
border:0; 
} 
body{border:1px solid #f3f3f3; background:#fefefe} 
div#loading{ 
width:950px; 
height:265px; 
line-height:265px; 
overflow:hidden; 
position:relative; 
text-align:center; 
} 
div#loading p{ 
position:static; 
+position:absolute; 
top:50%; 
vertical-align:middle; 
} 
div#loading p img{ 
position:static; 
+position:relative; 
top:-50%;left:-50%; 
vertical-align:middle 
} 
--> 
</style> 
<div id="loading"> 
 <img src="http://www.baidu.com/img/baidu_logo.gif" />  
</div> 
<script> 
var i=0; 
var c=3; 
var imgarr=new Array 
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif"; 
imgarr[1]="http://img.baidu.com/img/logo-img.gif"; 
imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif"; 
var Browser=new Object(); 
Browser.userAgent=window.navigator.userAgent.toLowerCase(); 
Browser.ie=/msie/.test(Browser.userAgent); 
Browser.Moz=/gecko/.test(Browser.userAgent); 
function SImage(url,callback){ 
   var img = new Image(); 
   if(Browser.ie){ 
      img.onreadystatechange =function(){ 
        if(img.readyState=="complete"||img.readyState=="loaded"){ 
            ii=i+1; 
            callback(i); 
         } 
      } 
   }else if(Browser.Moz){ 
      img.onload=function(){ 
        if(img.complete==true){ 
            ii=i+1; 
            callback(i); 
         } 
      } 
    } 
   img.src=url; 
} 
function icall(v) 
{ 
  if(v<c){ 
    SImage(""+imgarr[v]+"",icall); 
   }else if(v>=c){ 
      i=0; 
//location.replace('banner.html');//这里写本身的动做吧， 
   } 
}