博客
关于我
强烈建议你试试无所不能的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/

你可能感兴趣的文章
由 Tagged Pointer 联想到的一个问题
查看>>
Python代理IP爬虫的简单使用
查看>>
KVO探索
查看>>
前端错误与捕获
查看>>
玩一玩颜值测试
查看>>
动画和flex布局
查看>>
CSS布局
查看>>
第一篇:SpringBoot 2 x 构建工程
查看>>
你不了解的vue中的v-on事件绑定
查看>>
CAShaperLayer&UIBezierPath系列(二)
查看>>
小程序自定义组件(1)
查看>>
聊聊Elasticsearch的ProcessProbe
查看>>
首页Activity重复启动问题
查看>>
人工智能+建筑,会产生什么?
查看>>
防抖与节流
查看>>
Cocos2dx源码记录(9) CCQuadCommand
查看>>
浅谈Promise怎么取消或中断
查看>>
JavaScript——执行环境及作用域
查看>>
C++ STL之stack栈
查看>>
【MySQL (6) | 详细分析MySQL事务日志redo log】
查看>>