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

最新推荐文章于 2021-11-17 09:11:57 发布

moshihahamowang

最新推荐文章于 2021-11-17 09:11:57 发布

阅读量671

点赞数

本文链接：https://blog.csdn.net/moshihahamowang/article/details/17711789

版权

如今很多网站都实现了图库的功能，那么图片间的切换效果将直接影响用户体验，使用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.οnlοad=show;
</script>
<title>JavaScript实现图片预加载</title>
</head>
<body>
<div></div>
<br />
<input type="button" value="Previous" disabled="disabled" οnclick="showPreviousImage()"/>
<input type="button" value="Next" οnclick="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.οnlοad=show;
</script>
<title>JavaScript实现图片预加载</title>
</head>
<body>
<div></div>
<br />
<input type="button" value="Previous" disabled="disabled" οnclick="showPreviousImage()"/>
<input type="button" value="Next" οnclick="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.οnlοad=show();
</script>
<title>JavaScript实现图片预加载</title>
</head>
<body>
<div id="div_images"></div>
<br />
<input type="button" value="Previous" disabled="disabled" οnclick="showPreviousImage()"/>
<input type="button" value="Next" οnclick="showNextImage()"/>
</body>
</html>

这个实例中图片的上一页和下一页是有结束的，如果你想实现一直循环的话，可以修改源代码，非常简单，如果不会的话可以联系我，大家可以交流