关注前端开发微信微信号web007007

图片预加载幻灯

作者 管理员 发布时间 2012-06-03 17:07 文章分类 JavaScript, 前端资源 文章评论 抢沙发 阅读次数

最近学习原生js,学到Image对象,就简单写了个图片预加载幻灯。
图片预加载的好处是能够让页面更快的显示,特别是遇到幻灯图片很大的时候。
但是可能会重复http的请求。
其中利弊,只能自己衡量了。

菜鸟一个,有发现bug的话多多请多包含指教。
js代码:

<pre>/*
 * time:2012-06-04
 * js图片缓存幻灯
 * author:cll
*/
window.onload =function()
{
		var $id = document.getElementById("focus");
		var $bimg = $id.getElementsByTagName("img")[0];
		var $ul = $id.getElementsByTagName("ul")[0];
		var $load = $id.getElementsByTagName("div")[1];
		var $li = $id.getElementsByTagName("li");
		var speed = 4000;
		var $url = new Array("img/img01.jpg",
                  "img/img02.jpg",
                  "img/img03.jpg",
                  "img/img04.jpg",
                  "img/img05.jpg");
                var index = i = 0;
		//按钮切换
		for( i=0; i < $li.length; i++)
		{
			$li[i].index = i;
			$li[i].onmouseover = function (){
				show(this.index);
			}
		}
		//滑入停止
		$id.onmouseover = function()
		{
			clearInterval(autoPlay)
		}
		//滑出继续播放
		$id.onmouseout = function()
		{
			play();
		}
		//自动播放
		function play()
		{
			autoPlay = setInterval(function()
			{
				show(index);
				index++;
				if(index==$li.length) index=0;
			},speed)
		}
		play();
		//切换
		function show(n)
		{
			index = n;
			var img = new Image();
			img.src = $bimg.src = $url[n];
			for (i = 0; i < $li.length; i++) $li[i].className = "";
			$li[index].className = "current";
			img.complete ? $load.style.display = "none" : ($bimg.onload  = function() {$load.style.display = "none"});

		}
}

html结构:

<div id="focus">
	<div><a href="#"><img src="" width="400" height="400" /></a><div></div></div>
    <ul>
    	<li class="">1</li>
        <li class="">2</li>
        <li class="">3</li>
        <li class="">4</li>
        <li class="">5</li>
    </ul>
</div>

预览网址:http://www.web92.net/dom/2012-06-04-focus

本文固定链接: http://www.web92.net/273.html | WEB前端开发

该日志由 于2012年06月03日发表在 JavaScript, 前端资源 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 图片预加载幻灯 | WEB前端开发
关键字:
【上一篇】
【下一篇】