原理:

1.给页面绑定滚动事件;

2.加载页面的时候把真正的图片地址放在某属性中;

3.然后再滚动过程中判断元素是否进入当前浏览器窗口内;

4.最后加载图片,当然加载什么,用什哪种用户体验都得由你决定;

  难点

  浏览器兼容是造成难点的原因所在,DOM标准和IE标准,每天前端的工作都在和它们打交道。思考下面的几段代码

  1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop

目的:获得当前页面相对于窗口显示区左上角的 Y 位置.
DOM标准:window.pageYOffset;
IE标准:window.document.documentElement.scrollTop

  2.window.innerHeight ? window.innerHeight : document.documentElement.clientHeight

目的:声明了窗口的文档显示区的高度和宽度,以像素计.
DOM标准:innerheight 和 innerwidth;
IE标准:document.documentElement 或 ducument.body (与 DTD 相关)的 clientWidth 和 clientHeight 属性作为替代

  3.obj.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop

目的:获取页面元素的位置.
当浏览器为 非webkit内核 时,document.body.scrollTop值恒定为0,使用 document.documentElement.scrollTop才能取到正确值 ; 
当浏览器为 webkit内核 时,document.documentElement.scrollTop值恒定为0,使用 document.body;
我还搜索到一种说法是和DTD相关(即 当页面指定了 DOCTYPE时,使用 document.documentElement ; 当页面没有指定了 DOCTYPE时,使用 document.body),请确定知道的朋友帮忙指出下,不胜感谢。

  细节:

1.因为真正的地址最初是在某属性中(默认是xsrc,可自己设置),所以默认的图片地址最好是一个像素的透明图片,这样可以避免在浏览器中出现红X;

2.在图片load的时候可以加入等待的图片,这样用户才会知道这里有图片需要加载,良好的用户体验是前端一直所追求的(例子中有体现);

3.在图片load成功后可以加入合适的显示效果(例子中木有体现,可以自己尝试);

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

JavaScript源码如下:

var scrollLoad = (function (options) {
        var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', time: options.time ||300};
        var camelize = function (s) {
            return s.replace(/-(\w)/g, function (strMatch, p1) {
                return p1.toUpperCase();
            });
        };
        this.getStyle = function (element, property) {
            if (arguments.length != 2) return false;
            var value = element.style[camelize(property)];
            if (!value) {
                if (document.defaultView && document.defaultView.getComputedStyle) {
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(property) : null;
                } else if (element.currentStyle) {
                    value = element.currentStyle[camelize(property)];
                }
            }
            return value == 'auto' ? '' : value;
        };
        var _init = function () {
            var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,
                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),
                docImg = document.images,
                _len = docImg.length;
            if (!_len) return false;
            for (var i = 0; i < _len; i++) {
                var attrSrc = docImg[i].getAttribute(defaults.src),
                    o = docImg[i], tag = o.nodeName.toLowerCase();
                if (o) {
                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));
                    if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {
                        if (tag === "img" && attrSrc !== null) {
                            o.setAttribute("src", attrSrc);
                        }
                        o = null;
                    }
                }
            };
            window.onscroll = function () {
                setTimeout(function () {
                    _init();
                }, defaults.time);
            }
        };
        return _init();
    });

scrollLoad();

demo下载

可传递一个参数设置src原地址和响应时间

scrollLoad({

    src:'userSrc', //字符串型
    time: 100       //数字型
}) 

JavaScript实现 页面滚动图片加载相关推荐

  1. html 图片显示一块一块加载失败,页面中图片加载失败的优化方法

    网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的.情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大 ...

  2. jQuery页面滚动 动态加载图片等元素

    相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...

  3. 在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度转

    为了降低tomcat服务的压力,把页面上的图片采用windows版的nginx进行加载,由于有些图片比较大,加载特别的慢,所以在nginx中打开了gzip的压缩功能.加载图片的速度快了很多. 通过站长 ...

  4. javascript实现页面的重新加载和页面的刷新

    1.reload 方法,该方法强迫浏览器刷新当前页面.  语法:location.reload([bForceGet])  参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里 ...

  5. 页面滚动动态加载数据,页面下拉自动加载内容

    $(window).scroll(function () {var scrollTop = $(this).scrollTop();var scrollHeight = $(document).hei ...

  6. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  7. jquery 当页面图片加载之后_图片的懒加载和预加载

    一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...

  8. 服务器图片加载慢_页面提高性能利器_懒加载

    哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...

  9. 大图片加载、懒加载实现原理(滚动加载图片)

    大图片加载从模糊到清晰: https://www.cnblogs.com/wangmeijian/p/6822674.html?utm_source=tuicool&utm_medium=re ...

最新文章

  1. 76. 最小覆盖子串(滑动窗口)
  2. Linux buffer/cache异同
  3. invalidate(true) 图形不显示_2D图像界面-ATI 图形界面卡
  4. WE CAN:全球智能路由网络 | 体验共享技术专题
  5. 使用Docker-数据卷挂载案例2
  6. 百度Android定位API使用指南
  7. 1999元的AirPods Pro无线耳机突然发布,史上最大升级,买不买?
  8. 百度语音识别技术突破 巨头崛起
  9. js中字符串正则表达式、正则法则pattern、RegExp、flags、exec
  10. java 下划线_Java SE 9:“ _”(下划线)更改
  11. 优秀雇员必备六大关键技能(2)
  12. 关于tp框架token
  13. 3DSMAX制作超时空未来动画场景-3D建模场景模型教程
  14. PowerPoint 中缺少think-cell 加载项怎么解决?
  15. drain open 线与_开漏(opendrain)和开集(opencollector)介绍
  16. acwing 2041.干草堆
  17. python魔方程序算法_python魔方程序算法_python算法(一)
  18. nodemon启动报错
  19. PyTorch 错误 RuntimeError: invalid argument 5: k not in range for dimension at /pytorch/aten/src/THC/g
  20. 21、conda下载,安装,卸载

热门文章

  1. DotNetNuke4.x安装心得(按照下面那篇《最完整的DNN 4.X 安装攻略(适合3.X版本)》安装还是失败的朋友进来看看...
  2. 邮箱回执怎么看_考研复试联系导师邮件怎么写?
  3. MATLAB学习笔记(九)
  4. tum数据集_数值预报尚能战否?来自数据驱动的挑战
  5. ruby on rails连接mysql_ruby on rails 连接mysql数据库
  6. Python机器学习:多项式回归与模型泛化007偏差方差平衡
  7. 6park留园 android,‎App Store 上的“掌上留园-6park”
  8. 制造业数字化转型的困难_智能制造如何助力企业转型升级?百家制造业企业共谋数字化转型路...
  9. android开发所遇问题集(一)----Mr.Zhang
  10. OC 获取view相对位置_【全职业P4阶段世界BUFFS和药剂】BUFFS获取方法药剂自己查询出处...