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

 更新时间:2015年08月21日 08:50:03   转载 投稿:hebedich  
看到一篇博客说土豆网的图片是延迟加载的。原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载。这样做的好处是当页面有好几屏内容时,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷。

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

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

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

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

首当其冲,缩小图片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,以此来判断哪些图片需要加载,哪些不需要。

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

相关文章

  • NodeJS框架Express的模板视图机制分析

    NodeJS框架Express的模板视图机制分析

    MVC模式可谓无人不知,它除了能增强团队协作的效率,还可方便产品的维护升级,本文我们将对Express框架的模板和视图(V)相关功能进行介绍。
    2011-07-07
  • 使用js简单实现了tree树菜单

    使用js简单实现了tree树菜单

    使用js简单实现了树菜单!具体实现实例代码如下,相信自己你一定可以实现的更好
    2013-11-11
  • js读取cookie方法总结

    js读取cookie方法总结

    这篇文章主要介绍了js读取cookie方法,实例总结了四种常用的读取方法,包含了对cookie数据的分割与遍历操作,是非常实用的技巧,需要的朋友可以参考下
    2014-10-10
  • BootStrap tab选项卡使用小结

    BootStrap tab选项卡使用小结

    这篇文章主要为大家详细介绍了BootStrap tab选项卡使用小结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS简单实现多级Select联动菜单效果代码

    JS简单实现多级Select联动菜单效果代码

    这篇文章主要介绍了JS简单实现多级Select联动菜单效果代码,涉及JavaScript数组元素的遍历及动态设置select的实现技巧,需要的朋友可以参考下
    2015-09-09
  • 微信小程序实现图片选择并预览功能

    微信小程序实现图片选择并预览功能

    这篇文章主要为大家详细介绍了微信小程序实现图片选择并预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js实现文本框输入文字个数限制代码

    js实现文本框输入文字个数限制代码

    这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文
    2015-12-12
  • 浅谈webpack和webpack-cli模块源码分析

    浅谈webpack和webpack-cli模块源码分析

    这篇文章主要介绍了浅谈webpack和webpack-cli模块源码分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 使用JavaScript动态设置样式实现代码及演示动画

    使用JavaScript动态设置样式实现代码及演示动画

    使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现,本文有利于巩固你js与css方面的知识,感兴趣的你可以了解下哦,希望本文对你有所帮助
    2013-01-01
  • JS创建Tag标签的方法详解

    JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下
    2017-06-06

最新评论