php实现预加载和懒加载,关于前端:懒加载与预加载的区别

实践

懒加载： 提早加载图片，达到加载条件时再加载。

原理：img的src属性初始不搁置理论须要的链接，而是存在data-url属性中，达到某条件后再动静充值src属性值为data-url里的链接地址，实现懒加载。

作用：加重服务器压力，节约流量，页面加载速度快。

预加载：提前加载图片，当用户须要查看时是间接从浏览器缓存里取的资源，用户操作体验速度快。

原理：在浏览器加载页面时创立image对象并赋值src链接

作用：让用户有疾速的冲浪体验。

毛病：减少服务器压力，首页加载渲染工夫长。

区别：懒加载与预加载都有进步用于体验成果，然而优化体验成果的出发点不同，懒加载能够加重服务器压力，然而预加载会减少服务器压力；

实现

懒加载实现

// 这里以滚动可视区内懒加载需要为例

var imgs=document.getElementsByTagName('img');

var viewHeight=document.ducumentElement.clientHeight;

// 检测img元素是否在可视区

function inView (img){

var rectObject=document.getBoundingClientRect();

if(rectObject.bottom >= 0 && rectObject.top < viewHeight){

return true

}else{

return false

}

}

function lazyLoad(arr){

for(let i=0;i

if(inView(arr[i])){

arr[i].src=arr[i].dataset.url;

}

}

}

window.addEventListener('scroll',lazyLoad);

预加载实现

var imgs=['./1.jpg','./2.jpg','./3.jpg'];

var imgsDom=[];

function preLoad(arr){

for(let i=0;i

let item=new Image();

item.src=imgs[i];

imgsDom.push(item);

}

}

window.οnlοad=function(){

preLoad(imgs);

}