为何写那篇小说?

又到了这些月的博客时间了,原安插是打算在这些月做3个的意义较炫的拖拽类,可是感觉想的太简单,达成起来遇见不少标题,借使技术分享做不到促进人反而有毒,这就歇菜了,所以依旧等自作者多找些资料商量切磋,“拖拽类“先放放吧,下边起头正题…

  5.刚好木有工作职分,此时不写更待曾几何时…

  现在的页面大多都存有的性状 – 内容丰硕,图片较多;像大家日常浏览的Tmall,京东,团购网站之类的(本人网购控,属于二个月不在网上花点钱就不痛快),3个页面几十张图片那叫大雨,所以现在风靡起了二个艺术

滚动动态加载。那一个艺术能解决一点都不小程度的HTTP请求,首先页面只加载窗口展现区的图纸,唯有等到页面滚动,且滚动到相应地方的时候再去加载图片,那样做网页加载快了(请求少了,加载的事物少了能不提快么)。在《高品质网站建设指南》第二章就说到,减少HTTP请求的机要,那是抓实网页前端品质,优化页面加载速度很实用的做法。

 

  原理:

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,可自个儿安装),所以默许的图形地址最佳是3个像素的晶莹图片,这样可以幸免在浏览器中出现红X;

图片 1 

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       //数字型
}) 

 

 

 

末尾,祝我们工作兴奋,学习发展,哈哈..

 

 

  4.那些月的博客还没写;

本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html

  3.做技术分享也是在让更六人帮团结测试,因为这些作者木有在项目中实际上行使,都以友善雕刻的,全体假诺有题目请大家建议,先感激了;

  1.优化页面很实用的主意,技术完成简单;

  2.寻找了连带内容的稿子,好像都以用jQuery的不二法门,可是假使不用jQuery的站长难道就不可能用那种措施了么;

相关文章

网站地图xml地图