看到一篇博客说土豆网的图片是延迟加载的。原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载。这样做的好处是当页面有好几屏内容时,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近开始整理一些以前写的好用的插件,…^-^!!!
随着页面信息越来越丰富饱满,尤其像淘宝,京东之类的购物网站,首页就是他们的生命线,- -||||
最近在做某银行的网站,只有挤上首页才能得到更多的关注,于是乎各种业务人员就开始了首页位置之争,为了平息他们的战乱。体现我大度包容的一面 ,啊哈哈哈
首页囊括了他们全部的需求,他们满意的走人了,结果技术经理来了,说首页加载怎么这么大,于是乎,减!!!
首当其冲,缩小图片 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;
- }
- };
- // -->
代码中的注释已经很清楚了,各位自己慢慢看吧。欢迎扔砖,更欢迎各种改进和完善的建议。
来源: