网页图片延时加载的js代码_javascript技巧_脚本之家

作者:联系我们

相关地址: 大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。 实现原理 把所有需要延时加载的图片改成如下的格式: 图片 1 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域的图片的src的值用lazy_src的来替换 代码 复制代码 代码如下:lazyLoad= { var map_element = {}; var element_obj = []; var download_count = 0; var last_offset = -1; var doc_body; var doc_element; var lazy_load_tag; function initVar { doc_body = document.body; doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement; lazy_load_tag = tags || ["img", "iframe"]; }; function initElementMap() { var all_element = []; //从所有相关元素中找出需要延时加载的元素 for (var i = 0, len = lazy_load_tag.length; i < len; i++) { var el = document.getElementsByTagName; for (var j = 0, len2 = el.length; j < len2; j++) { if == "object" && el[j].getAttribute { element_obj.push; } } } for (var i = 0, len = element_obj.length; i < len; i++) { var o_img = element_obj[i]; var t_index = getAbsoluteTop;//得到图片相对document的距上距离 if { map_element[t_index].push; } else { //按距上距离保存一个队列 var t_array = []; t_array[0] = i; map_element[t_index] = t_array; download_count++;//需要延时加载的图片数量 } } }; function initDownloadListen() { if return; var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop: doc_element.scrollTop; //可视化区域的offtset=document的高+ 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; 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; } delete map_element[key]; download_count--; } } setTimeout(initDownloadListen, 200); }; function getAbsoluteTop { if (arguments.length != 1 || element == null) { return null; } var offsetTop = element.offsetTop; while (element = element.offsetParent) { offsetTop += element.offsetTop; } return offsetTop; } function init; initElementMap(); initDownloadListen(); }; return { init: init } })();使用方法:把页面上需要延时加载的图片src改成为lazy_src,然后把上面的js放到body最后面,然后调用:lazyLoad.init(); 调戏的方法可以使用firebug来查看一时图片是否是延时加载。 另外: 如果你的页面上存在有内容切换的栏目的话,可能在切换时切换的内容里的图片可能会不显示,处理的方法是在内容时单独图片加载处理,如: 复制代码 代码如下: ///切换内容的代码... chlid.find.each.attr.attr.removeAttr;

实现原理

把所有需要延时加载的图片改成如下的格式:

图片 2

然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域的图片的src的值用lazy_src的来替换

代码

lazyLoad= { var map_element = {}; var element_obj = []; var download_count = 0; var last_offset = -1; var doc_body; var doc_element; var lazy_load_tag; function initVar { doc_body = document.body; doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement; lazy_load_tag = tags || ["img", "iframe"]; }; function initElementMap() { var all_element = []; //从所有相关元素中找出需要延时加载的元素 for (var i = 0, len = lazy_load_tag.length; i < len; i++) { var el = document.getElementsByTagName; for (var j = 0, len2 = el.length; j < len2; j++) { if == "object" && el[j].getAttribute { element_obj.push; } } } for (var i = 0, len = element_obj.length; i < len; i++) { var o_img = element_obj[i]; var t_index = getAbsoluteTop;//得到图片相对document的距上距离 if { map_element[t_index].push; } else { //按距上距离保存一个队列 var t_array = []; t_array[0] = i; map_element[t_index] = t_array; download_count++;//需要延时加载的图片数量 } } }; function initDownloadListen() { if return; var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop: doc_element.scrollTop; //可视化区域的offtset=document的高+ 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; 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; } delete map_element[key]; download_count--; } } setTimeout(initDownloadListen, 200); }; function getAbsoluteTop { if (arguments.length != 1 || element == null) { return null; } var offsetTop = element.offsetTop; while (element = element.offsetParent) { offsetTop += element.offsetTop; } return offsetTop; } function init; initElementMap(); initDownloadListen(); }; return { init: init } })();

本文由杏彩发布,转载请注明来源

关键词: