原生javascript实现图片滚动、延时加载功能


Posted in Javascript onJanuary 12, 2015

实现效果:下拉滚动条时,图片出现在可见区域时,才开始加载

思路:

(1)img标签,把真实的图片地址,放在自己设置的属性里面,如 lazy-src

(2)获取img离页面的高度(在JQ里是offset().top),原生是:

img.getBoundingClientRect().top + document.body.scrollTop||document.documentElement.scrollTop

(3)判断img出现的位置是否在可见区域里:

.在浏览器的可见区域,justTop>scrollTop&&offsetTop<(scrollTop+windowHeight),这里的justTop是图片的offsetTop+图片高度

//保存document在变量里,减少对document的查询

            var doc = document;

            for(var n=0,i = this.oImg.length;n<i;n++){

                //获取图片占位符图片地址

                var hSrc = this.oImg[n].getAttribute(this.sHolder_src);

                if(hSrc){

                    var scrollTop = doc.body.scrollTop||doc.documentElement.scrollTop,

                        windowHeight = doc.documentElement.clientHeight,

                        offsetTop = this.oImg[n].getBoundingClientRect().top + scrollTop,

                        imgHeight = this.oImg[n].clientHeight,

                        justTop = offsetTop + imgHeight;

                    // 判断图片是否在可见区域

                    if(justTop>scrollTop&&offsetTop<(scrollTop+windowHeight)){
                        this.isLoad(hSrc,n);

                    }

                }
            }

以下为详细代码:

function LGY_imgScrollLoad(option){

        this.oImg = document.getElementById(option.wrapID).getElementsByTagName('img');

        this.sHolder_src = option.holder_src;

        this.int();

    }

    LGY_imgScrollLoad.prototype = {

        loadImg:function(){

            //保存document在变量里,减少对document的查询

            var doc = document;

            for(var n=0,i = this.oImg.length;n<i;n++){

                //获取图片占位符图片地址

                var hSrc = this.oImg[n].getAttribute(this.sHolder_src);

                if(hSrc){

                    var scrollTop = doc.body.scrollTop||doc.documentElement.scrollTop,

                        windowHeight = doc.documentElement.clientHeight,

                        offsetTop = this.oImg[n].getBoundingClientRect().top + scrollTop,

                        imgHeight = this.oImg[n].clientHeight,

                        justTop = offsetTop + imgHeight;

                    // 判断图片是否在可见区域

                    if(justTop>scrollTop&&offsetTop<(scrollTop+windowHeight)){

                        //alert(offsetTop);

                        this.isLoad(hSrc,n);

                    }

                }
            }

        },

        isLoad:function(src,n){

            var src = src,

                n = n,

                o_img = new Image(),

                _that = this;

            o_img.onload = (function(n){

                _that.oImg[n].setAttribute('src',src);

                _that.oImg[n].removeAttribute(_that.sHolder_src);

            })(n);

            o_img.src = src;
        },

        int:function(){

            this.loadImg();

            var _that = this,

                timer = null;

            // 滚动:添加定时器,防止频繁调用loadImg函数

            window.onscroll = function(){

                clearTimeout(timer);

                timer = setTimeout(function(){

                    _that.loadImg();

                },100);

            }

        }

    }

效果图:

原生javascript实现图片滚动、延时加载功能

以上就是本文的全部内容了,实现的效果不比jQuery插件实现的差吧,代码还简洁,小伙伴们参考下吧。

Javascript 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
javascript 实现 原路返回
Jan 21 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Highcharts学习之数据列
Aug 03 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 #Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 #Javascript
推荐4个原生javascript常用的函数
Jan 12 #Javascript
原生js实现日期联动
Jan 12 #Javascript
Javascript中innerHTML用法实例分析
Jan 12 #Javascript
js实现从数组里随机获取元素
Jan 12 #Javascript
javascript的tab切换原理与效果实现方法
Jan 10 #Javascript
You might like
php 文章调用类代码
2011/08/11 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
基于jquery的拖动布局插件
2011/11/25 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
vue实现选中效果
2020/10/07 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python类成员继承重写的实现
2020/09/16 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
运动会稿件50字
2014/02/17 职场文书
一年级学生期末评语
2014/04/21 职场文书
食品安全工作方案
2014/05/07 职场文书
护理专科学生自荐书
2014/07/05 职场文书