纯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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
浅析JavaScript动画
Jun 10 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
深入探究node之Transform
Jul 20 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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读取MySQL数据代码
2008/06/05 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python中turtle作图示例
2017/11/15 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
HTML的form表单和django的form表单
2019/07/25 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
小学数学教学反思
2014/02/02 职场文书
八项规定整改措施
2014/02/12 职场文书
电视新闻稿
2015/07/17 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android