码迷,mamicode.com
首页 > 其他好文 > 详细

三十六、最好用的懒加载

时间:2018-11-23 12:38:57      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:alt   png   use   lse   end   com   set   element   turn   

window.Echo=(function(window,document,undefined){‘use strict‘;var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute(‘data-echo‘);store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll(‘[data-echo]‘);var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener(‘scroll‘,_throttle,false);}else{window.attachEvent(‘onscroll‘,_throttle);}};return{init:init,render:_throttle};})(window,document);

  echo.min.js

初始化:

Echo.init({
offset:1, //离可视区域多少像素的图片可以被加载
throttle:1 //图片延迟多少毫秒加载
});

 

技术分享图片

三十六、最好用的懒加载

标签:alt   png   use   lse   end   com   set   element   turn   

原文地址:https://www.cnblogs.com/deng-jie/p/10006653.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!