关于JavaScript实现图片预加载的改进
来源：互联网 发布：泰拉瑞亚 修改数据 编辑：程序博客网 时间：2024/04/25 21:53
如今很多网站都实现了图库的功能，那么图片间的切换效果将直接影响用户体验，使用JavaScript的Image对象可以轻松实现图片的预加载，使图片间的切换更加流畅。看过一些关于Image对象实现预加载的文章，基本原理都差不多，在 JavaScript 中实例化一个新 Image对象，然后将需要载入的图片的 URL 作为参数传入，最后在onLoad事件中显示图片。本文的实现也是基于这个原理，并在此之上做了一些改进，在此分享给大家，希望大家多多指正。Web图片浏览器的基本实现：使用Image对象加载当前图片，图片加载时页面显示“Loading”字样，当图片完成加载后（触发onload事件）显示在页面上，代码如下：
<html><head><script language="javascript" type="text/javascript">var urls = new Array(5);urls[0] = "图片地址0"urls[1] = "图片地址1"urls[2] = "图片地址2"urls[3] = "图片地址3"urls[4] = "图片地址4"var currentImageIndex = 0;var input=document.getElementsByTagName("input"); function preLoadImage(url) { var div=document.getElementsByTagName("div")[0]; var img = new Image(); div.innerHTML="<p>Loading...</p>"; img.onload = function () { div.innerHTML = ""; div.style.width = String(img.width)+"px"; div.appendChild(img); }; img.src = url;} function checkButtonsDisabled() { if(currentImageIndex != 0){ input[0].disabled = ""; }else{ input[0].disabled = "disabled"; } if(currentImageIndex != urls.length - 1){ input[1].disabled = ""; }else{ input[1].disabled = "disabled"; } } function showPreviousImage() { currentImageIndex = currentImageIndex - 1; checkButtonsDisabled(); preLoadImage(urls[currentImageIndex]);}function showNextImage() { currentImageIndex = currentImageIndex + 1; checkButtonsDisabled(); preLoadImage(urls[currentImageIndex]);}function show() { preLoadImage(urls[currentImageIndex]);}window.onload=show;</script><title>JavaScript实现图片预加载</title></head><body><div></div><br /><input type="button" value="Previous" disabled="disabled" onclick="showPreviousImage()"/><input type="button" value="Next" onclick="showNextImage()"/></body></html>改进一：预加载下一张图片
上述实现方法仅加载当前的图片，这样在图片初次加载时会首先显示“Loading”字样，尽管时间很短，但是会显得图片切换的过程不是很流畅。为了解决这个问题，我们需要做一个预加载的处理，一种实现方法是通过循环将所有图片一次性加载，但是当图片很多时便会使初次加载变得很慢；还有一种方法是使用另一个Image对象，在当前图片加载完成后预加载下一张图片，这样在切换图片时就不会看到“Loading”字样了，而且比较节省资源，改动后的代码如下：
<html><head><script language="javascript" type="text/javascript">var urls = new Array(5);urls[0] = "图片地址0"urls[1] = "图片地址1"urls[2] = "图片地址2"urls[3] = "图片地址3"urls[4] = "图片地址4"var currentImageIndex = 0;var input=document.getElementsByTagName("input");function preLoadImage(currentURL, nextURL){ var currentImage = new Image();var nextImage = new Image(); var div=document.getElementsByTagName("div")[0]; div.innerHTML="<p>Loading...</p>"; currentImage.onload = function () { div.innerHTML = ""; div.style.width = String(currentImage.width) + "px"; div.appendChild(currentImage); if(nextURL != undefined) {nextImage.src = nextURL;} }; currentImage.src = currentURL;}function checkButtonsDisabled() { if(currentImageIndex != 0){ input[0].disabled = ""; }else{ input[0].disabled = "disabled"; } if(currentImageIndex != urls.length - 1){ input[1].disabled = ""; }else{ input[1].disabled = "disabled"; } }function showPreviousImage() { currentImageIndex = currentImageIndex - 1; checkButtonsDisabled(); preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);}function showNextImage() { currentImageIndex = currentImageIndex + 1;checkButtonsDisabled();preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);}function show() { preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);}window.onload=show;</script><title>JavaScript实现图片预加载</title></head><body><div></div><br /><input type="button" value="Previous" disabled="disabled" onclick="showPreviousImage()"/><input type="button" value="Next" onclick="showNextImage()"/></body></html>改进二：相同图片只加载一次
通过上述改进图片间的切换已经流畅很多了，但是还有一个问题，虽然下一张图片已经存在本地缓存了，但是当切换到下一张图片时仍然要重新加载一次（见下图）
为了解决这一问题，我们使用动态插入div的方法，仍然是加载当前图片和下一张图片，每当加载完一张图片便将它放到div中插入页面，即页面中存在多张图片，但是仅显示一张，而且在图片加载前会首先判断该图片是否已经存在，如果存在就不重复加载（见下图）
改动后的代码如下：
<html><head><script language="javascript" type="text/javascript">var urls = new Array(5);urls[0] = "图片地址0"urls[1] = "图片地址1"urls[2] = "图片地址2"urls[3] = "图片地址3"urls[4] = "图片地址4"var currentImageIndex = 0;var input=document.getElementsByTagName("input");function preLoadImage(currentURL, nextURL) { var div = document.getElementById("image_" + currentImageIndex); if(div != undefined) { div.style.display = ""; } else { //加载当前图片 var newDIV = document.createElement("div"); newDIV.innerHTML = "<p>Loading...</p>"; newDIV.id = "image_" + currentImageIndex; document.getElementById("div_images").appendChild(newDIV); var currentImage = new Image(); currentImage.onload = function () { newDIV.innerHTML = ""; newDIV.style.width = String(currentImage.width) + "px"; newDIV.appendChild(currentImage); }; currentImage.src = currentURL; } nextImageIndex = currentImageIndex + 1; div = document.getElementById("image_" + nextImageIndex); if(div == undefined && nextURL != undefined) { //预加载下一张图片 var nextDIV = document.createElement("div"); nextDIV.innerHTML = "<p>Loading...</p>"; nextDIV.id = "image_" + nextImageIndex; nextDIV.style.display = "none"; document.getElementById("div_images").appendChild(nextDIV); var nextImage = new Image(); nextImage.onload = function () { nextDIV.innerHTML = ""; nextDIV.style.width = String(nextImage.width) + "px"; nextDIV.appendChild(nextImage); }; nextImage.src = nextURL; }}function showPreviousImage() { var div = document.getElementById("image_" + currentImageIndex); div.style.display = "none"; currentImageIndex = currentImageIndex - 1; checkButtonsDisabled(); preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);}function showNextImage() { var div = document.getElementById("image_" + currentImageIndex); div.style.display = "none"; currentImageIndex = currentImageIndex + 1; checkButtonsDisabled(); preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);}window.onload=show();</script><title>JavaScript实现图片预加载</title></head><body><div id="div_images"></div><br /><input type="button" value="Previous" disabled="disabled" onclick="showPreviousImage()"/><input type="button" value="Next" onclick="showNextImage()"/></body></html>这个实例中图片的上一页和下一页是有结束的，如果你想实现一直循环的话，可以修改源代码，非常简单，如果不会的话可以联系我，大家可以交流
0 0
- 关于JavaScript实现图片预加载的改进
- Javascript实现图片的预加载
- Javascript实现图片的预加载功能
- Javascript实现图片的预加载
- JavaScript实现图片预加载
- Javascript实现图片的预加载的完整实现
- Javascript实现图片的预加载的完整实现
- Javascript实现图片的预加载的完整实现
- Javascript实现图片的预加载的完整实现
- Javascript实现图片的预加载的完整实现
- 关于实现图片预加载
- javascript关于图片加载的处理
- UITableView 实现异步加载图片之改进
- javascript实现图片的延迟加载
- JavaScript实现延迟加载图片的方法
- 【JavaScript】JavaScript实现图片翻转以及预加载图片
- JavaScript实现页面图片预加载
- 【Javascript】利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 学习JQuery - 8
- 位置服务及GPS定位的调用
- ThinkPHP防范XSS跨站攻击
- fusioncharts入门系列5之renderer参数
- 关于org.apache.catalina.session.StandardManager doLoad错误的解决
- 关于JavaScript实现图片预加载的改进
- 《软件开发》阅读笔记一
- Linux C编程的一个小例子——实现一个简单的who命令(第一版)
- Spring中ApplicationContext和beanfactory区别
- 安卓是汽车电子的未来吗？
- WEB: JSTL标签+EL表达式
- 在广州传智播客.Net培训感觉自己蜕变好多
- input checkbox radio样式改变
- ant编译时环境变量及错误提示问题
