详细表现为:
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径更换成一张占位图的路径,这样就只必要求一次,只有当图片涌如今浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。
好处:
很多页面,内容很丰富,页面很长,图片较多。比如瀑布流,图片数量多且大,如果一次性加载完毕,用户等待韶光过长。
技能事理:
页面中的img元素,如果没有src属性,浏览器就不会发出要求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送要求。
实现步骤:
1、不要将图片地址放到src属性中,而是放到其它属性中。
2、页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。
3、在滚动事宜中重复判断图片是否进入视野,如果进入,则将data-original属性中的值取出存放到src属性中。
预加载也便是提前加载图片
详细表现为:
当用户须要查看时可直接从本地缓存中渲染
好处:
图片预先加载到本地中,访问者便可享受到极快的加载速率。这对图片画廊及图片霸占很大比例的网站来说十分有利,它担保了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时得到更好的用户体验。
实现预加载的方法:
方法一:用CSS和JavaScript实现预加载
方法二:仅利用javascript实现预加载
方法三:利用Ajax实现预加载
两种技能行为是相反的,一个是提前加载,一个是迟缓乃至不加载。