JS经典实例网站首页 JS经典实例

javascript学习笔记-预加载

发布时间：2018-04-05 18:30:44编辑：雪饮阅读（）

预加载

在真正高清图片没有加载完毕之前可以先放一个预加载的图片，高清图片加载完毕后再来改变src，这个很简单我们只需要先放一个src然后通过js来改变，因为高清图比较慢，所以虽然改变了，可是真正生效则是在高清图真正加载完毕时才生效，这样则不会出现突兀的感觉的。

代码实现：

<!doctype html>

<html>

<head>

<title>雪饮个人博客</title>

<style>

img{width:400px;height:350px;display:block;margin:0 auto;}

</style>

window.onload=function(){

var imgs=document.getElementsByTagName("img");

for(var i=0;i<imgs.length;i++){

imgs[i].src=imgs[i].getAttribute("xsrc");

}

</script>

</head>

<body>

</body>

</html>

点击查看大图

经常会遇到某些网站中对于图片只给显示小图,当你点击图片或者附近某些按钮后才加载高清原图的

效果实现:

<!doctype html>

<html>

<head>

<title>雪饮个人博客</title>

<style>

img{display:block;}

</style>

window.onload=function(){

var img=document.getElementsByTagName("img")[0];

var imgSrc=img.src;

var max=document.getElementById("max");

var min=document.getElementById("min");

var loading="loading.gif";

//放大事件

max.addEventListener("click",function(){

img.src=loading;

var temp_img=new Image();

temp_img.addEventListener("load",function(){

img.src=temp_img.src;

},false);

temp_img.src=img.getAttribute("xsrc");

},false);

//恢复事件

min.addEventListener("click",function(){

img.src=imgSrc;

},false)

}

</script>

</head>

<body>

<button id="max">查看高清原图</button>

<button id="min">恢复到缩略图</button>

</body>

</html>

关键字词：javascript,预加载

上一篇：javascript学习笔记-延迟加载(每次只加载可见区域)

下一篇：javascript学习笔记-附件

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript学习笔记-预加载

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例