原生javaScript实现图片延时加载的方法

更新时间：2014年12月22日 08:53:31 投稿：shichen2014

这篇文章主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下

本文实例讲述了原生javaScript实现图片延时加载的方法。图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了，但有朋友觉得加载jquery插件包太大了，于时自己写了一个，给各位分享一下。

首先，图片延时加载可以节省我们带宽，获取到更好的用户体验，尤其对于图片多的站点，这一点显得至关重要，下面就跟大家探讨一下图片延时加载原理和实现代码。

图片延时加载原理

图片延时加载原理是在html里面的图片src填的并不是真正的图片地址，而是以一种自定义属性把图片地址赋给img标签，如：src=”img/loading.gif” data-url=”img/1.jpg”，然后通过js判断浏览器滚动条事件，达到某处的时候把自定义属性里面的图片真实地址赋给当前img标签的src，从而实现图片动态的显示。在真正的项目中，这些图片的地址可以通过ajax传递过来，赋给img的自定义属性。

原生JS实现图片延时加载实例：

文字内容看起来终究有些枯燥，我写了一个简单的demo，现在把全部代码贴出来，需要的朋友可以直接复制过去，看一下代码就明白了。

复制代码代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>图片延迟加载</title>

<style>

    img{display:block;width:350px;height:245px;background:url(img/loading.gif) center center no-repeat}

</style>

</head>

<body>

<div id="div">

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

<img src="" alt="" data-url="img/11.jpg" class="test"><br>

</div>

<script type="text/javascript">

var obj=document.getElementById("div").getElementsByTagName("img"),

h=window.innerHeight || document.documentElement.clientHeight;

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

    obj[i].url=obj[i].getAttribute("data-url");

    obj[i].top=obj[i].offsetTop;

    obj[i].flag=true;  //防止浏览器一直加载图片，这样图片加载成功后，滚动浏览器的时候就不会再加载图片了；

}

var fnLoad = function(obj){

    var t = document.body.scrollTop || document.documentElement.scrollTop; 

    if(t+h>obj.top+200&&obj.top>t){ //给个200为了提高让用户看到图片加载状态，更加友好

       setTimeout(function(){

         obj.src=obj.url;

         obj.flag=false;

       },500)

    }

}

window.onscroll = window.onload=function(){

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

        if(obj[i].flag){

            fnLoad(obj[i]);

        }

    }

}

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

移动端js触摸事件详解
这篇文章主要为大家详细介绍了移动端js触摸事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
JavaScript表单即时验证验证不成功不能提交
这篇文章主要为大家详细介绍了JavaScript表单即时验证，验证不成功不能提交，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
原生JavaScrpit中异步请求Ajax实现方法
这篇文章主要介绍了原生JavaScrpit中异步请求Ajax实现方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-11-11
Javascript的异步函数和Promise对象你了解吗
这篇文章主要为大家详细介绍了Javascript异步函数和Promise对象，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
JavaScript实现网页版五子棋游戏
这篇文章主要为大家详细介绍了JavaScript实现网页版五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
老生常谈 js中this的指向
下面小编就为大家带来一篇老生常谈 js中this的指向。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
定单管理上 JS表格排序
定单管理上 JS表格排序...
2006-10-10
JS复杂判断的更优雅写法代码详解
我们编写js代码时经常遇到复杂逻辑判的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下
2018-11-11
一文教你如何优雅的使用WebSocket
WebSocket最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种,下面这篇文章主要给大家介绍了关于如何优雅的使用WebSocket的相关资料,需要的朋友可以参考下
2022-05-05
js父页面与子页面不同时显示的方法
这篇文章主要介绍了js父页面与子页面不同时显示的方法,打开一个页面后,父页面DISABLE,在子页面关闭后,父页面ENABLE,是比较实用的技巧,需要的朋友可以参考下
2014-10-10