`
天梯梦
  • 浏览: 13730867 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

预加载图片

OperaIEJavaScriptjQueryXHTML 
阅读更多

第一种：

 

<script>

	function preload(path, img, callback)
	{
		for (var i=0; i<img.length; i++)
		{
			var src = path + img[i]
			img[i] = document.createElement("img")
			img[i].style.display = "none"
			img[i].onload = function()
			{
				document.body.removeChild(this)
				this.onload = null
				this.style.display = ""
				if (!--i) callback(img)
			}
			img[i].src = src
			document.body.appendChild(img[i])
		}
	}

onload = function()
{
	preload
	(
		"http://bbs.51js.com/images/smilies/",[
		"sweat.gif",
		"loveliness.gif",
		"call.gif",
		"funk.gif"],
		function (img)
		{
			alert('ok')
			for (var i=0; i<img.length; i++)
			{
				document.body.appendChild(img[i])
			}
		}
	)
}

</script>
 

第二种：

 

<!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/logo.gif','http://www.baidu.com/img/logo.gif','http://www.baidu.com/img/logo.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>

 

 

第三种：

 

<!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>图片批量加载</title>
</head>
<body>
<div id="status" ></div>
<div id="processing"></div>
<script type="text/javascript">
function $id(id){ return document.getElementById(id);}
function $c(tagName){ return document.createElement(tagName);}
window.onload = function(){
imageLoad( {
    url:function(v){
        v = [];
        for(var i=1; i<=100; i++){
            v[v.length] = 'http://www.landgame.com.cn/images/game/slg_pic/GifBorder_'+i+'.gif?_='+(new Date).getTime();
        }
        return v;
    },
    oncomplete: function(s){
         $id('status').innerHTML = '正在加载...'+s.complete+'/'+s.total;
         $id('processing').innerHTML = this.src;
    },
    complete:function(imgs, s){
        var $r = $c('div');
        $r.id = 'result';
        $r.innerHTML = '计划加载:'+s.total+', 加载成功:'+s.load+'错误:'+s.error;
        document.body.appendChild($r);
        for(var i=0, l=imgs.length, $m; i<l; i++){
              $m = $c('div');
              $m.innerHTML = (imgs[i].loaded?'加载成功:':'加载失败:')+ imgs[i].src;
              document.body.appendChild($m);
        }
    }
  });
};
//------------------------------------------------------------------------------------------------------------
function imageLoad( s ){
	var urlset = [], undefined, toString = Object.prototype.toString;
	switch( toString.apply(s.url) ){
		case '[object String]': urlset[urlset.length] = s.url; break;
		case '[object Array]': if(!s.url.length){ return false; } urlset = s.url; break;
		case '[object Function]': s.url = s.url(); return imageLoad( s );
		default: return false;
	}
	var imgset =[], r ={ total:urlset.length, load:0, error:0, abort:0, complete:0, currentIndex:0 }, timer,
		_defaults = {
			url:'',
			onload: 'function',
			onerror: 'function',
			oncomplete: 'function',
			ready: 'function',
			complete: 'function',
			timeout: 15
		};
	for( var v in _defaults){
		s[v] = s[v]===undefined? _defaults[v]: s[v];
	}
	s.timeout = parseInt( s.timeout ) || _defaults.timeout;
	timer = setTimeout( _callback, s.timeout*1000);
	// 生成 image 对象数组
	for( var i=0,l=urlset.length,img; i<l; i++){
		img 		= new Image();
		img.loaded	= false;
		imgset[imgset.length] = img;
	}
	// onload & onerror 绑定
	for( i=0,l=imgset.length; i<l; i++){
		imgset[i].onload  	= function(){ _imageHandle.call(this, 'load', i ); };
		imgset[i].onerror 	= function(){ _imageHandle.call(this, 'error', i ); };
		imgset[i].onabort 	= function(){ _imageHandle.call(this, 'abort', i ); };
		imgset[i].src 		= ''+urlset[i];
	}
	// ready 事件回调
	if( _isFn(s.ready) ){ s.ready.call({}, imgset, r); }	
	// onload & onerror 句柄
	function _imageHandle( handle, index ){
		r.currentIndex = index;
		switch( handle ){
			case 'load':
				this.onload  = null; this.loaded = true; r.load++;
				// onload 事件回调
				if( _isFn(s.onload) ){ s.onload.call(this, r); }	
				break;
			case 'error': r.error++;
				// onerror 事件回调
				if( _isFn(s.onerror) ){ s.onerror.call(this, r); }
				break;
			case 'abort': r.abort++; break;
		}
		r.complete++;
		// oncomplete 事件回调
		if( _isFn(s.oncomplete) ){ s.oncomplete.call(this, r); }
		// 判断全局加载
		if( r.complete===imgset.length ){  _callback(); }
	}
	function _callback(){
		clearTimeout( timer );
		if( _isFn(s.complete) ){ s.complete.call({}, imgset, r); }
	}
	function _isFn(fn){ return toString.apply(fn)==='[object Function]'; }
	return true;
}
</script>
</body>
</html>
 

 

 

 

链接主题：

javascript图片浏览器的核心——图片预加载

延迟加载图片 Lazy Load

jQuery 页面载入进度条 (必有一款适合你----综合搜集版)

 

 

 

 

分享到：
| Windows Vista系统中设置VPN
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 预加载图片

    在IT行业中，预加载图片是一项重要的优化技术，特别是在网页设计和开发中，它能提高用户体验，使得图片在用户实际浏览前就已经加载完毕。本话题主要围绕"jQuery 预加载图片"这一主题展开，我们将深入探讨jQuery库...

    jquery.lazyload图片预加载效果 jquery预加载

    你可以下载并运行这个示例，观察预加载图片在滚动过程中的动态加载过程，更好地理解其工作原理和使用方法。 总之，jQuery LazyLoad是一个强大的图片预加载工具，通过它我们可以有效地提升网页性能，优化用户体验。...

    图片预加载特效

    1. **同步预加载**：使用`&lt;img&gt;`标签的`src`属性预加载图片，这种方式是同步的，会阻塞浏览器的渲染线程，不推荐在主线程中使用。 2. **异步预加载**：通过JavaScript创建`Image`对象并设置其`src`属性，这样可以在...

    Jquery预加载图片

    要同时大量图片，由于网络、图片大小等因素导致网页加载慢，这种用户体验很差的形式应该避免出现。类似于淘宝的图片预加载功能。 该js文件是为了实现图片预加载或者延迟加载的功能，提高用户体验。

    通过jQuery预加载图片的方法共1页.pdf.zip

    在IT行业中，预加载图片是一项重要的优化技术，尤其是在网页设计和开发中，它能提高用户体验，减少用户等待时间。预加载图片是指在用户实际需要之前，利用JavaScript库，如jQuery，预先加载页面中可能需要的图片资源...

    微信小程序-图片预加载组件

    在微信小程序开发中，图片预加载是一个非常关键的优化步骤，尤其对于图片密集型的应用，如电商、社交或媒体类应用。预加载技术允许开发者在用户实际需要之前提前下载图片资源，减少用户等待时间，提升用户体验。本篇...

    图片预加载效果

    图片预加载技术是一种优化网页性能的方法，主要用于提升用户体验，尤其是对于图像密集型的网站或应用。当用户浏览网页时，预加载技术会提前加载部分或全部未来可能需要的图片资源，这样在用户实际查看这些图片时，...

    jquery图片预加载延迟加载

    在这个函数中，`imgArray` 是包含要预加载图片URL的数组，我们为每个URL创建一个新的`Image`对象，并设置其`src`属性，从而触发图片的下载。 接着，我们讨论延迟加载（Lazy Loading）。延迟加载是一种优化策略，它...

    jQuery实现图片预加载

    以下是一个简单的预加载图片的jQuery示例代码： ```javascript $(document).ready(function() { var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片列表 $.each(images, function(index, ...

    jquery图片预加载

    总的来说，jQuery图片预加载技术通过提前加载图片资源，提高了网页的响应速度和用户体验。正确理解和应用预加载策略，是现代网页开发中的重要技能。在实际项目中，还需要根据具体需求和性能考虑，灵活选择和优化预...

    图片预加载插件preloadjs

    使用preloadjs 预加载图片，首先需要引入preloadjs库，然后创建一个`PreloadJS`实例。以下是一个基本示例： ```html &lt;script src="path/to/preloadjs.min.js"&gt;&lt;/script&gt; var queue = new createjs.LoadQueue(); ...

    图片预加载学习(一)：无序加载之图片切换

    压缩包中的`demo1(图片无序加载).html`可能包含一个预加载图片的示例，可以参考其HTML结构和JavaScript代码来理解预加载的实现过程。此外，`js`文件很可能是用于处理预加载逻辑的JavaScript代码。 7. **图片预加载...

    js实现图片预加载.tx

    由于浏览器会自动下载`&lt;img&gt;`元素的`src`属性指向的图片，因此，我们可以通过动态创建`&lt;img&gt;`元素并设置其`src`属性，达到预加载图片的目的。同时，为了进一步优化性能，我们可以利用事件监听器监听图片的加载状态，...

    js预加载图片方法汇总

    JavaScript预加载图片是一种优化网页性能的技术，通过在页面加载时预先加载用户可能需要的图片，以减少用户在后续交互过程中的等待时间。本文将详细解析几种常见的JavaScript预加载图片的方法。 1. **纯CSS预加载**...

    瀑布流+图片预加载实例

    在这个实例中，我们将探讨如何实现瀑布流效果，并结合图片预加载技术来提升用户体验。 首先，`style.css`文件通常包含了实现瀑布流布局所需的CSS样式。瀑布流布局的关键在于利用CSS的`float`属性或`display: inline...

    图片预加载、占位背景图jquery plugin

    总的来说，`jQuery-preloading-with-image`插件简化了预加载图片的实现，通过jQuery的链式操作和丰富的回调机制，使得开发者能够更好地控制图片加载过程，提升网页性能和用户体验。对于那些希望优化图片加载速度，...

    jq图片预加载

    tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载

    wxapppreload微信小程序图片预加载.zip

    wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip

    带有图片预加载技术的jquery图片幻灯代码.rar

    该插件的工作流程大致如下：当用户打开页面时，jQuery会检测到图片列表，并开始预加载图片。一旦预加载完成，用户可以通过点击左右箭头或者鼠标悬停在图片上来切换幻灯片。控制文字的显示增强了用户对功能的理解，...

    jQuery瀑布流图片预加载展示代码.zip

    在预加载图片的场景中，modernizr.js可以帮助我们判断浏览器是否支持某些特性，比如CSS3的`background-size`属性，这对于图片的预加载和显示至关重要。 接下来，我们来看看jQuery如何实现图片的预加载。预加载是...

Magicbox
Global site tag (gtag.js) - Google Analytics