纯javascript实现图片延时加载方法


Posted in Javascript onAugust 21, 2015

最近开始整理一些以前写的好用的插件,…^-^!!!

随着页面信息越来越丰富饱满,尤其像淘宝,京东之类的购物网站,首页就是他们的生命线,- -||||

最近在做某银行的网站,只有挤上首页才能得到更多的关注,于是乎各种业务人员就开始了首页位置之争,为了平息他们的战乱。体现我大度包容的一面 ,啊哈哈哈

首页囊括了他们全部的需求,他们满意的走人了,结果技术经理来了,说首页加载怎么这么大,于是乎,减!!!

首当其冲,缩小图片K数,不够,那怎么办,好吧,进入正题。长页面未显示的部分可以先不加载,省流量就是省钱,开搞!!!

思路就是,判断图片在页面中的位置,如果图片的位置大于小于当前的屏幕高度,那么显示图片,否则隐藏图片。

怎么一开始隐藏图片呢,很简单,<img csii_src="1.png">,给一个浏览器不认识的属性csii_src,当需要显示图片的时候在element.src=element.getAttribute("csii_src");,思路很简单吧,上代码了。

function lazyLoad() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body = null;
var doc_element = null;
var lazy_load_tag = [];
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body
: document.documentElement;
lazy_load_tag = tags || [ "img", "iframe" ];
}
;
function initElementMap() {
for ( var i = 0, len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for ( var j = 0, len2 = el.length; j < len2; j++) {
if (typeof (el[j]) == "object"
&& el[j].getAttribute("csii_src")) {
element_obj.push(el[j]);
}
}
}

for ( var i = 0, len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;
}
}

}
;
function initDownloadListen() {
if (!download_count)
return;
/*var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop
: doc_element.scrollTop;*/
var offset;
if(os.firefox){
offset = doc_element.scrollTop;
}else{
offset = doc_body.scrollTop;
}

var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
// setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset + 20;
for ( var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for ( var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]]
.getAttribute("csii_src");
}
delete map_element[key];
download_count--;
}
}
// setTimeout(initDownloadListen, 200);
}
;
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
$(window).scroll(function(){
initDownloadListen();
});
}
;
init();
}

不足之处,页面结构必须已定好,图片的高度必须设置好,不然,无法计算图片距离顶部的高度。需注意。

我们再来看下另外一个小伙伴是如何实现的

<!-- 
      var temp = -1;//用来判断是否是向下滚动(向上滚动就不需要判断延迟加载图片了) 
       
      window.onscroll = function() { 
      var imgElements = document.getElementsByTagName("img"); 
      var lazyImgArr = new Array(); 
      var j = 0; 
      for(var i=0; i<imgElements.length; i++) { 
       if(imgElements[i].className == "lazy"){ 
        lazyImgArr[j++] = imgElements[i]; 
       } 
      } 
     
              var scrollHeight = document.body.scrollTop;//滚动的高度 
      var bodyHeight = document.body.offsetHeight;//body(页面)可见区域的总高度 
      if(temp < scrollHeight) {//为true表示是向下滚动,否则是向上滚动,不需要执行动作。 
       
       for(var k=0; k<lazyImgArr.length; k++) { 
       var imgTop = lazyImgArr[k].offsetTop;//1305(图片纵坐标) 
       if((imgTop - scrollHeight) <= bodyHeight) { 
        lazyImgArr[k].src = lazyImgArr[k].alt; 
        lazyImgArr[k].className = "notlazy" 
               } 
      } 
       
      temp = scrollHeight; 
     } 
       
    }; 
       
// -->

思路如下:先在<img>标签中将src的值设置为一个极小的图片文件路径,alt属性的值设置为真正要显示的图片文件路径,当向下滚动到图片的位置时,将src的值替换为alt的值,这样就会自动加载真正要显示的图片了,同时,给标签设置一个值为lazy的class,加载完了之后,将其值设置为notlazy,以此来判断哪些图片需要加载,哪些不需要。

代码中的注释已经很清楚了,各位自己慢慢看吧。欢迎扔砖,更欢迎各种改进和完善的建议。

Javascript 相关文章推荐
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 #Javascript
js变形金刚文字特效代码分享
Aug 20 #Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 #Javascript
JS实现的通用表单验证插件完整实例
Aug 20 #Javascript
jquery Easyui快速开发总结
Aug 20 #Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 #Javascript
js实现按钮颜色渐变动画效果
Aug 20 #Javascript
You might like
php&amp;java(三)
2006/10/09 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
python 多线程实现检测服务器在线情况
2015/11/25 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python+opencv识别图片中的圆形
2020/03/25 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
python批量生成条形码的示例
2020/10/10 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
python中str内置函数用法总结
2020/12/27 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
会计实习生工作总结的自我评价
2013/10/07 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
爱耳日活动总结
2014/04/30 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP