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


Posted in Javascript onDecember 22, 2014

本文实例讲述了原生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程序设计有所帮助。

Javascript 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 #Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 #Javascript
编写简单的jQuery提示插件
Dec 21 #Javascript
不使用ajax实现无刷新提交表单
Dec 21 #Javascript
webapp框架AngularUI的demo改造之路
Dec 21 #Javascript
浅析webapp框架AngularUI的demo
Dec 21 #Javascript
AngularJS基础知识
Dec 21 #Javascript
You might like
php生成xml简单实例代码
2009/12/16 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python处理csv数据的方法
2015/03/11 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
一个SQL面试题
2014/08/21 面试题
高中生自我鉴定范文
2013/10/30 职场文书
总经理岗位职责描述
2014/02/08 职场文书
业务员的岗位职责
2014/03/15 职场文书
交通文明倡议书
2014/05/16 职场文书
李敖北大演讲稿
2014/05/24 职场文书
宾馆卫生管理制度
2015/08/06 职场文书