图片懒加载插件

﹏ヽ暗。殇╰゛Y 2022-06-06 08:07 732阅读 0赞

<body >  
    <img src="默认图片" data-echo="真正图片地址"  width="800" height="800" alt="">  
    <img src="默认图片" data-echo="真正图片地址"  width="800" height="800" alt="">  
    <img src="默认图片" data-echo="真正图片地址"  width="800" height="800" alt="">  
    <img src="默认图片" data-echo="真正图片地址"  width="800" height="800" alt="">  
    <img src="默认图片" data-echo="真正图片地址"  width="800" height="800" alt="">  
  
    </body>  
    <script src="echo.js"></script>  
    <script>  
   window.onload = function()\{  
Echo.init(\{  
offset: 200, //设置图片距离可视区域多少像素被加载（纵向）  
           throttle: 1050  //设置图片延迟加载的时间  
\});  
   \}

</script>

echo.js  代码

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);

发表评论取消回复

表情：

评论列表（有 0 条评论，732人围观）

还没有评论，来说两句吧...

相关阅读

相关图片懒加载

1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading

缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 344 阅读

相关图片懒加载插件

<body > <img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt="">

﹏ヽ暗。殇╰゛Y/ 2022年06月06日 08:07/ 0 赞/ 733 阅读

相关图片懒加载

懒加载的意义[（在线demo预览）][demo] 尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是

痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 385 阅读

相关图片懒加载

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的

你的名字/ 2022年05月28日 05:29/ 0 赞/ 374 阅读

相关图片懒加载

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，

偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 409 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 357 阅读

相关图片懒加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 389 阅读

相关 vue图片懒加载插件 vue-lazyload

第一步：安装插件 npm i vue-lazyload --save 第二步：在main.js中引入，并使用 ![watermark_type_ZmFuZ3poZ

柔光的暖阳◎/ 2022年04月16日 06:06/ 0 赞/ 607 阅读

相关图片懒加载

文章目录可能用到的属性占位图原生 JS 实现 HTML JS 其

拼搏现实的明天。/ 2022年02月22日 06:09/ 0 赞/ 501 阅读

相关图片懒加载

\[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/

川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 686 阅读