原生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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
source.php查看源文件
2006/12/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
基于jquery循环map功能的代码
2011/02/26 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Python多线程下载文件的方法
2015/07/10 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
详解python statistics模块及函数用法
2019/10/27 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
运动会广播稿80字
2014/01/23 职场文书
小松树教学反思
2014/02/11 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
简单租房协议书
2014/10/21 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python