Ajax懒加载和预加载

1、懒加载

1.呀是懒加载?

懒加载也就是是推加载。
当访问一个页面的当儿,先管img元素或是其他因素的背景图片路径替换成一摆设大小为1*1px图片的门路(这样就是单待请求一次于,俗称占位图),只有当图片出现于浏览器的可视区域外时,才装图片正真的不二法门,让图片展示出。这就算是图懒加载。

2.为何而利用懒加载?

洋洋页面,内容十分丰富,页面很丰富,图片于多。比如说各种商城页面。这些页面图片数多,而且比较异常,少说百来K,多则上兆。要是页面载入就一次性加载了。估计大家还见面等交黄花变成黄花菜了。

3.懒加载的规律是啊?

页面中之img元素,如果没src属性,浏览器就是不见面发出请求去下充斥图片,只有经过javascript设置了图路径,浏览器才会发送请求。
懒加载的法则就是是优先以页面中拿装有的图片统一使用相同张占位图进行占位,把正真的不二法门是元素的“data-url”(这个名字起个好认识好记的就是尽)属性里,要因此底早晚就取出来,再装;

4.懒加载的贯彻步骤?

1)首先,不要以图片地址放到src属性中,而是坐任何性质(data-original)中。
2)页面加载成功后,根据scrollTop判断图片是否当用户之视野内,如果以,则拿data-original属性中的价值取出存放到src属性中。
3)在滚动事件被再次判断图片是否进入视野,如果上,则将data-original属性中之价取出存放到src属性中。

5.懒加载的独到之处是什么?

页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

2、预加载

1.啊是预加载?

超前加载图片,当用户用查阅时只是直接由本土缓存中渲染

2.为何而运预加载?

图预先加载到浏览器中,访问者就可顺地当您的网站上冲浪,并分享及最好快之加载速度。这对准图片画廊及图片占据很可怜比例之网站来说特别便民,它保证了图迅速、无缝地披露,也可帮忙用户在浏览你网站内容常常取重新好之用户体验。

3.贯彻预加载的法子有哪?

办法同样:用CSS和JavaScript实现预加载
主意二:仅使用JavaScript实现预加载
方三:使用Ajax实现预加载

详见:http://web.jobbole.com/86785/

3、懒加载和预加载的对照

1)概念:
懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或入某些原则时才加载某些图片。
预加载:提前加载图片,当用户需查阅时只是直接从当地缓存中渲染。

2)区别:
些微种植技术之原形:两者的行是反的,一个是提前加载,一个凡是缓缓甚至不加载。懒加载对服务器前端有自然之化解压力作用,预加载则会多服务器前端压力。

3)懒加载的含义和贯彻方式发出:
意义:
懒加载的严重性目的是用作服务器前端的优化,减少请求数要延缓请求数。
兑现方式:
1.率先种植是纯的推加载,使用setTimeOut或setInterval进行加载延迟.
2.次种植是标准加载,符合某些规则,或接触了一点事件才起异步下载。
3.叔栽是可视区加载,即只有加载用户可以看到的区域,这个要是因为监控滚动条来贯彻,一般会在离开用户观看某个图片前肯定去遍开加载,这样能担保用户拉下时巧能看到图片。

4)预加载的意义和实现方式有:
意义:
预加载可以说凡是牺牲服务器前端性能,换取更好的用户体验,这样好要用户之操作得到最好抢之体现。
落实方式:
心想事成预载的法门十分多,比如:用CSS和JavaScript实现预加载;仅使用JavaScript实现预加载;使用Ajax实现预加载。
常用的凡new
Image();设置其src来贯彻预载,再用onload方法回调预载完成事件。只要浏览器把图片下载到地头,同样的src就见面使用缓存,这是最核心也是极实用的预载方法。当Image下充斥了图片头晚,会落丰厚和高,因此好当预载前取图片的轻重(方法是为此记时器轮循宽高变化)。

4、补充知识

  1. 屏幕可见到窗口大小

        **原生方法**:
            window.innerHeight 标准浏览器及IE9+ ||
            document.documentElement.clientHeight 标准浏览器及低版本IE标准模式 ||
            document.body.clientHeight  低版本混杂模式
        **jQuery方法**: 
            $(window).height();
  1. 浏览器窗口顶部同文档顶部之间的去,也尽管是滚条滚动的偏离:

        **原生方法**:
              window.pagYoffset 标准浏览器及IE9+ ||
              document.documentElement.scrollTop 兼容ie低版本的标准模式 ||
              document.body.scrollTop 兼容混杂模式;
        **jQuery方法**:
              $(document).scrollTop();
  1. 收获元素的尺码

$(o).width() = o.style.width;
$(o).innerWidth() = o.style.width+o.style.padding;
$(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;
$(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

**注意**
要使用原生的style.xxx方法获取属性,这个元素必须已经有内嵌的样式,如`<div style="...."></div>`;

如果原先是通过外部或内部样式表定义css样式,必须使用`o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]`来获取样式值。
  1. 得元素的岗位信息
    jQuery
    $(o).offset().top素距离Ajax文档顶的离开
    $(o).offset().left要素距离文档左边缘之离。
    原生getoffsetTop();
    顺手取一下赶回元素相对于第一个盖稳定的父元素的皇距离,注意和地方偏移距的区别;
    jQuery:position()返一个靶
    $(o).position().left = o.style.left;
    $(o).position().top = o.style.top;
作者:xiaolizhenzhen
链接:https://www.jianshu.com/p/4876a4fe7731
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章