<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var IE=navigator.appName=="Microsoft Internet Explorer";
var Opera=navigator.appName.toLowerCase()=="opera";
var FF=!IE && !Opera;
function LoadImage(arrSrc,callBack)
{
this.Length=arrSrc.length;
this.LoadedLen=0; //已经被加载的图片个数
var self=this;
if(self.Length<1)
{
callBack(arrSrc);
return;
}
//经测试,OPERA与别的浏览器加载方式不同,所以特别独立开来...
if(Opera)
{
for(var i=0;i<self.Length;i++)
{
var tmpImg=new Image();
tmpImg.src=arrSrc[i];
tmpImg.onload=function()
{
self.LoadedLen++;
if(self.LoadedLen==self.Length && callBack) callBack(arrSrc);
}
}
return;
}
this.Load=function()
{
self.LoadedLen++;
document.getElementById("counter").innerHTML=self.LoadedLen;
if(self.LoadedLen<self.Length) self.DownImg();
else if(callBack) callBack(arrSrc);
}
this.DownImg=function()
{
var tmpImg=new Image();
tmpImg.src=arrSrc[self.LoadedLen];
if(IE)
{
if(tmpImg.readyState=="complete") self.Load();
else tmpImg.onreadystatechange=function()
{
if(this.readyState=="complete") self.Load();
}
}
else tmpImg.onload=self.Load;
}
this.DownImg();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="counter"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var arr=['http://www.baidu.com/img/baidu_logo.gif','http://wb.caike.com/images/logo.gif','http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif'];
var t=new LoadImage(arr,function(arr)
{
var str="";
for(var i=0;i<arr.length;i++)
{
str+="<img src='"+arr[i]+"' /><br>";
}
document.body.innerHTML+=str;
});
//-->
</SCRIPT>
</BODY>
</HTML>
分享到:
相关推荐
微信小程序的图片预加载组件.rar
wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip
jquery.lazyload图片预加载 调用简单 内有实例
jQuery图片预加载代码是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效。
HTML+jquery图片预加载功能,实用于web及移动端
js实现图片预加载
图片预加载特效,
jQuery瀑布流图片预加载展示代码是一款基于modernizr.js制作瀑布流图片预加载动画特效。
经过自己的整理,能实现图片预加载效果的效果,有效减少带宽的占用,网页图片预加载效果
lazyload图片预加载js文件盒相关示例代码
JS javascript 图片 预加载 实现图片的加载
jquery.LoadImage图片预加载是一款一款实用简单的图片预加载效果,支持loading小图片,完全不需要在html让做任何改变即可实现。
jquery图片预加载延迟加载 先打开默认图片,随后顺序加载 优化打开速度 提升用户体验 极力推荐
站点实现预加载loading,但指定区域中图片未加载完,则实现自定义小图标,图片加载完后进入真正内容
tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载
图片预加载插件。包含有序加载和无序加载两种。具体使用方法,参考https://blog.csdn.net/yang1393214887/article/details/92582715
jQuery图片预加载插件源码.zip
图片预加载插件---preload.js
jQuery实现图片预加载,些插件在jquery基础上进行封装。大家可以对插件进行修改。
wxapp-preload 微信小程序图片预加载