原生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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
js表单验证实例讲解
Mar 31 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
Zerg兵种介绍
2020/03/14 星际争霸
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
php操作xml
2013/10/27 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
原生js开发的日历插件
2017/02/04 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
js实现返回顶部效果
2017/03/10 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
Python定时任务sched模块用法示例
2018/07/16 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
小学生秋游活动方案
2014/02/23 职场文书
产品推广策划方案
2014/05/10 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android