纯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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
DIV菜单层实现代码
Nov 19 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
简单的三步vuex入门
May 20 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
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警告错误信息的解决方法
2013/06/03 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
python和pyqt实现360的CLable控件
2014/02/21 Python
Python中tell()方法的使用详解
2015/05/24 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python实现进程同步和通信的方法
2018/01/02 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python取余运算符知识点详解
2019/06/27 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
地球上的星星观后感
2015/06/02 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL