您的位置：首页 > Web前端 > JavaScript

关于JavaScript实现图片预加载的改进

2011-06-15 11:31 459 查看
如今很多网站都实现了图库的功能，那么图片间的切换效果将直接影响用户体验，使用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”字样了，而且比较节省资源，改动后的代码如下：

……

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 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]);
}

……


改进二：相同图片只加载一次

通过上述改进图片间的切换已经流畅很多了，但是还有一个问题，虽然下一张图片已经存在本地缓存了，但是当切换到下一张图片时仍然要重新加载一次（见下图）



为了解决这一问题，我们使用动态插入div的方法，仍然是加载当前图片和下一张图片，每当加载完一张图片便将它放到div中插入页面，即页面中存在多张图片，但是仅显示一张，而且在图片加载前会首先判断该图片是否已经存在，如果存在就不重复加载（见下图）



改动后的代码如下：

……

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]);
}

……
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航