纯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 相关文章推荐
js监听键盘事件示例代码
Jul 26 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
openLayer4实现动态改变标注图标
Aug 17 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
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php blowfish加密解密算法
2016/07/02 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
php中错误处理操作实例分析
2019/08/23 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
恶意软件的定义
2014/11/12 面试题
经典的班主任推荐信
2013/10/28 职场文书
求职信范文英文版
2014/01/05 职场文书
诚信考试承诺书
2014/03/27 职场文书
土地转让协议书范本
2014/04/15 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
西柏坡观后感
2015/06/08 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Redis 常见使用场景
2021/08/30 Redis
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers