博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iscoll 图片懒加载
阅读量:6243 次
发布时间:2019-06-22

本文共 1474 字,大约阅读时间需要 4 分钟。

今天在用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的图片,有没有都可以

转载地址:http://hopia.baihongyu.com/

你可能感兴趣的文章
jQuery的validate插件
查看>>
5-4 8 管道符 作业控制 shell变量 环境变量配置
查看>>
Enumberable
查看>>
开发者论坛一周精粹(第五十四期) 求购备案服务号1枚!
查看>>
validate表单验证及自定义方法
查看>>
知识点002-yum的配置文件
查看>>
学习 Git(使用手册)
查看>>
javascript 中出现missing ) after argument list的错误
查看>>
RSA 加密解密
查看>>
Cause: org.apache.ibatis.ognl.ExpressionSyntaxException: Malformed OGNL expression:......
查看>>
路由模式 - direct
查看>>
form表单的target属性
查看>>
mysql的常用引擎
查看>>
Linux基础(day40)
查看>>
第二个Java应用和Tomcat的管理功能
查看>>
10.28 rsync工具介绍 10.29/10.30 rsync常用选项 10.31 rsync通过ssh同步
查看>>
使用Layer弹窗时遇到Layer.Close()后dom元素延迟性销毁的问题 @Gyb
查看>>
LVS DR +keepalived配置
查看>>
安装redis.msi 及启动命令
查看>>
k8s集群部署四(部署Flannel网络)
查看>>