原生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 MD5加密实现代码
Mar 15 Javascript
js 小贴士一星期合集
Apr 07 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
typescript配置alias的详细步骤
Aug 12 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和XSL stylesheets转换XML文档
2006/10/09 PHP
逐步提升php框架的性能
2008/01/10 PHP
在PHP中使用模板的方法
2008/05/24 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
js工具方法弹出蒙版
2013/05/08 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
英国团购网站:Groupon英国
2017/11/28 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
远程调用的原理
2014/07/05 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
生日派对邀请函
2014/01/13 职场文书
高一数学教学反思
2014/02/07 职场文书
婚礼司仪主持词
2014/03/14 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
美德少年主要事迹材料
2015/11/04 职场文书