iscoll 图片懒加载

Edison 发布于2019-08-21 11:33 / 1067人阅读

摘要：今天在用插件做滚动效果的时候，要实现滚动过程中，图片的懒加载，网上搜了下，没有现成的。自己尝试写代码后，成功实现。先将源代码贴出如下。为一张背景图，用于显示公司默认图片的图片，有没有都可以

今天在用iscoll 插件做滚动效果的时候，要实现滚动过程中，图片的懒加载，网上搜了下，没有现成的。
自己尝试写代码后，成功实现。先将源代码贴出如下。
iScroll版本为5，移动端库为 zepto

//初始化iscroll            
var myScroll = new IScroll("#wrap");

//绑定滚动停止事件
myScroll.on("scrollEnd",function(){                  
        showImage();
});
                    
//显示图片
function showImage(){
    $.each($(".lazy"),function(i,el){
        if(isNeedLoad(el)){                                             
                el.src = $(el).removeClass("lazy").data("src");                                         
        }
    });     
}
                    
//是否需要加载图片
function isNeedLoad(el){
        var coords = el.getBoundingClientRect();
        return (coords.top < window.innerHeight && coords.bottom > window.innerHeight) || (coords.bottom > 0 && coords.top < 0) || (coords.top > 0 && coords.bottom < window.innerHeight);
}

//手动执行一次，将一开始需要展示的图片先显示出来
showImage();

  HTML代码如下：
  //black.gif是张1*1的空白图片   class="lazy" 为需要做懒加载效果载的图片
                       
                                                                                
                                                                                    
 CSS代码如下。                                                                               
  .h-content-body img{max-width: 100%;height:188px;display: block;margin:0.6rem auto;border-radius: 2px;transition:all .5s;opacity:1;}
  .h-content-body img.lazy{opacity:.5;background: url(../img/bg-img.png) no-repeat center center;}   .
  //background为一张背景图，用于显示公司默认图片logo的图片，有没有都可以

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86838.html

移动端滚动研究

摘要：还会有一个性能上的问题就是当页面的列表过长，元素过多时，在模拟滚动，下拉刷新这段时间内，页面也会有卡顿现象，这里采取了一个优化策略即列表较长时数量较多时，在触发下拉刷新的时机时将页面视窗之外的元素隐藏或者存放在里面。移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的...

ghnor 2019-08-23 14:32 评论0 收藏0
图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0
手摸手-100行代码自己动手写个功能完整的图片懒加载插件

摘要：景科同学的想法很简单，因为本人目前还是一个前端小白，只有通过不断的写，不断的学，在与的相爱相杀中才能更快速的进步。本项目是景科同学自写自测，虽然比较简单，但是不保证没有隐藏的。所以如果看官同学发现还望留言指正，景科同学在此以示感谢。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...

CompileYouth 2019-08-22 16:07 评论0 收藏0
淘宝新势力周H5性能优化实战

摘要：前言淘宝新势力周春上新是命运石链路链路第一次承接级大促，面对级大促内容丰富且复杂的页面需求，链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方普遍反馈页面卡顿严重，无法滑动。前言淘宝新势力周（春上新）是命运石kimi链路（H5链路）第一次承接S级大促，面对S级大促内容丰富且复杂的页面需求，kimi链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方...

Lionad-Morotar 2019-08-22 16:17 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

appetizerio 2019-08-29 16:57 评论0 收藏0