原生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 相关文章推荐
json简单介绍
Jun 10 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
layui选项卡效果实现代码
May 19 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 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
MySQL相关说明
2007/01/15 PHP
基于empty函数的输出详解
2013/06/17 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
中软Java笔试题
2012/11/11 面试题
社区学习十八大感想
2014/01/22 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
4s店活动策划方案
2014/08/25 职场文书