您的位置: 首页  >  文章  >  echo图片懒加载

echo图片懒加载

分类: 文章 • 2024-02-16 10:28:40

最近不是在学习设计模式吗，然后就看到了代理模式加载图片的样例，然后自己实现了一下，就发现，自己写的这货每次就只能加载一张图片，而且图片要放在哪也是个很严重的问题

然后就去了 gayhub 找了找了找流行的图片懒加载库，这一找，就找到了一个echo.j是，打开一看，源码只有100多行吧，震惊。。，看完源码，哎，木有上代理模式呀

仔细学习了下源码：觉得这种做法比较适合图片位置确定场景的吧，比如文章啊，一篇文章老长了，里面有蛮多图片散落在不同的地方，这样就比较合适，有可能有很多图片读者都不会翻到哪里，加载下来就浪费了

关键点：

1.如何判断元素距离出现在视野里的长度还有多少？以常见鼠标往下滚动，图片在下面为例

　　　　　　　　　　echo图片懒加载

灵魂画手哈哈，，，；H1是视窗的高度，window.innerHeight可以获得，H2就是提供给使用者设置的offsetBottom

然后祭出一个大招！element.getBoundingClientRect(),就能得到元素相对于视窗的四个距离

　　　　　　　　　　　　echo图片懒加载

 

  1. var H=Element.getboundingclientrect().top;

  2. var flag=H-(H1+H2);//当flag值小于0就代表可以开始加载图片了

　　那么，看看源码里面是怎么写的：

 

  1. var offset = {//四个值由用户传入决定，默认为0

  2. t: ,

  3. b:,

  4. l: ,

  5. r:

  6. };

  7. var view = { //计算邻界的距离

  8. l: 0 - offset.l,

  9. t: 0 - offset.t,

  10. b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,

  11. r: (root.innerWidth || document.documentElement.clientWidth) + offset.r

  12. };

  13. var isHidden = function (element) {

  14. return (element.offsetParent === null); //element.offsetParent 表示父元素，如果为null证明没有在添加到DOM里面，或者position值为fixed

  15. };

  16.  

  17. var inView = function (element, view) { //判断是否在视图中调用这个函数判断

  18. if (isHidden(element)) { //判断是否在界面上

  19. return false;

  20. }

  21.  

  22. var box = element.getBoundingClientRect(); //计算四边的距离是否满足条件

  23. return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);

  24. };

　　

2.已经有了是否加载的判断函数，那么如何做到图片的懒加载?

  先加载loadding小菊花图片，当满足懒加载的条件时候，切换img的src属性，

对于img元素的设置有两个比较重要的值一个是src，一个是data-echo ,（还有一个是背景图片，不太重要，忽略他）两个，src设置小菊花的地址，data-echo真实的地址；

那么所有页面元素都这样设置后，会有什么影响？

当所有图片都用设置src为同一值，也就是用同一张菊花图，加载完之后就可以通用了

img这个元素的特性就是，当设置了src属性，他会去先加载这张图图片，如果在js里面马上改变了img的src属性，他会同事再进行一次网络请求去加载你js设置的src地址的图片

但是 会先将html里面设置的src图片加载完，显示，你什么时候加载完第二个图片什么时候替换，如果你在第二张图片加载的时候又改变了src的值，，，那也是一样的，什么加载完什么时候显示，没加载完的情况下显示原来的

源代码：

 

  1. if (inView(elem, view)) {//是否满足加载条件

  2.  

  3. if (unload) {//如果设置超出了不加载，保存小菊花地址在data-echo-placeholder属性

  4. elem.setAttribute('data-echo-placeholder', elem.src);

  5. }

  6.  

  7. if (elem.getAttribute('data-echo-background') !== null) {//img的背景图片

  8. elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-

  9. background') + ')';

  10. }

  11. //当ele的src不等于data-echo的值，也就是真蒸的图片地址，改变图片的src

  12. else if (elem.src !== (src = elem.getAttribute('data-echo'))) {

  13. elem.src = src;

  14. }

  15.  

  16. if (!unload) { //如果没有设置超出不加载，在这里就可以清除这些属性了

  17. elem.removeAttribute('data-echo');

  18. elem.removeAttribute('data-echo-background');

  19. }

  20.  

  21. callback(elem, 'load');

  22. }

  23. else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {

  24. //处理超出不加载图片的情况，把原来保存的小菊花图赋给elem的src

  25. //因为小菊花是最开始就加载好了的，所以图片切换回小菊花，不再加载之前设置的真实图片

  26. if (elem.getAttribute('data-echo-background') !== null) {

  27. elem.style.backgroundImage = 'url(' + src + ')';

  28. }

  29. else {

  30. elem.src = src;

  31. }

  32.  

  33. elem.removeAttribute('data-echo-placeholder');

  34. callback(elem, 'unload');

  35. }

  36. }

  37. if (!length) {

  38. echo.detach();//移除事件监听

  39. }

　　

3，scroll函数节流

函数节流，两种方式：

1：在滚动的时候不会触发，滚动停下来才会隔一段时间触发

2：每隔一段事件都触发 

 

  1. //第一种方式，每次滚动过程中一直触发，每次都会新清除上一次的setTimout，添加一个新的setTimout

  2. var poll;

  3. function throttle(){

  4. clearTimeout(poll);

  5. poll=setTimeout(function(){

  6. echo.render();

  7. },delay||250)

  8. }

　　

　　

 

  1. var poll;
    function throttle(){

  2. if(poll){ //存在setTimout,不清除，直接返回

  3. return ;

  4. }

  5. clearTimout(poll)；

  6. poll=setTimeout(function(){

  7. echo.render();

  8. poll=null; //允许再次添加定时器

  9. },delay||250)

  10. }

相关推荐