首页 > 代码库 > 懒加载

懒加载

2024-09-09 04:30:30   220人阅读

一、图片懒加载
几种延迟加载的触发情况
【1】延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载。
【2】条件加载，符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有矿长时间的停顿。 
基本步骤
【1】网页中的图片都设为同一张图片默认图
【2】给图片增加data-src = "http://www.mamicode.com/img/xxx.png"的属性，保存图片的真实地址
【3】当触发某些条件时，自动改变该区域的图片的src属性为真实的地应用
loadImage = function(arr,index){                var self = this,                    oBox = document.getElementsByName("img");               if(arr.length == 0){                   for(var len = oBox.length, i = 0; i < len; i++){                      arr.push(oBox[i].dataset.src);                    }               }               var oImage = document.createElement("img");               oImage.src =http://www.mamicode.com/ arr[index];               oImage.onload = function(){                    oBox[index].innerHTML = "";                    oBox[index].appendChild(oImage);                    if(index+1==arr.length) return;                    self.loadImage(arr, index+1);               };            }

HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id：

<a id=“day2-meal-expense” href=http://www.mamicode.com/"javascript:" data-id="2312">测试</a>

这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用CSS属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。

var expenseday2 = document.getElementById(‘day2-meal-expense‘);  var typeOfDrink = expenseday2.dataset.id;

如果使用传统的方法获取属性值应该会类似下面：

var typeOfDrink = document.getElementById(‘day2-meal-expense‘).getAttribute(‘data-drink‘);

使用dataset操作data 要比使用getAttribute稍微慢些.如果我们只是处理少量的data数据，这种速度上差异造成的影响是基本上没有的。反而，我们应该看到，使用dataset操作自适应属性要比其他类似getAttribute的形式要少很多让人头疼的麻烦，并且更具有可读性。使用dataset获取元素的自定义属性是个很不错的方法。虽然说使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。

二、滚动加载

$(window).scroll(function () {    var scrollTop = $(this).scrollTop();    var scrollHeight = $(document).height();    var windowHeight = $(this).height();    if (scrollTop + windowHeight + 15 > scrollHeight) {        // todo    }});

offsetHeight(返回元素的高度，以像素为单位,包含内边距)： 200+4+4+3+3=214（自身200的高度+上下各为4的内边距+上下的各为3的border，注意不包括外边距） 
offsetLeft（返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位）: 2+3+1=6（ie6下为3）（父级div的内左边距2+父级div外左边距+3+子div左外边距+1，注意这里子div内边距是不会影响到offsetLeft） 
offsetTop（返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。） 2+3+1=6(ie6下为2)道理和offsetLeft一样 
scrollHeight(返回元素的完整的高度。当一个元素拥有滚动条时（比如由于 CSS 的 overflow:scroll 属性,如果为hidden，得到的只是能显示文字所能看到的高度) 
scrolltop(返回已经滚动到元素的上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。) 如果不拖动滚动条，默认的值为0； 
 

 

懒加载


联系
我们