原生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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 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 session 预定义数组
2009/03/16 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
Javascript模块模式分析
2008/05/16 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python基于select实现的socket服务器
2016/04/13 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python中查看文件名和文件路径
2017/03/31 Python
对Python3中的input函数详解
2018/04/22 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python tqdm库的使用
2020/11/30 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
合作协议书
2014/04/23 职场文书
给公司的建议书范文
2014/05/13 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
六年级学生评语大全
2014/12/26 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
保护环境的宣传语
2015/07/13 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Python  lambda匿名函数和三元运算符
2022/04/19 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技