php实现预加载和懒加载,前端项目分析：我是如何做图片优化的（预加载和懒加载）...

众所周知：前端页面上的图片是优化时最紧张也是最令人头疼的部分，想我也是泯灭了几个月的时间才优化到令我满足的一半的水平，，，唉，一言难尽啊！

图片的优化有两种方式： 预加载 和 懒加载

先说说 预加载 ：我从前写过关于预加载的博客，但是吧，，，内里许多内容不是让我很满足，由于后期发现有些内容在特定情况下才华显现出作用。

预加载的常用场景：在开辟的过程，我们常常会碰到如许的要求，当鼠标hover上去的时间，更改菜单的配景。假如没有举行图片预加载的话，会出现闪耀。那么拥有1px的眼睛的操持师们不会放过你的。为什么会出现这张情况？由于hover的时间，图片才会去加载。

比如下面的：

尚有这个：

var imgSrcArr=[

'要预加载的图片路径'(可以多个啊)

];

var imgWrap=[];

function preloadImg(arr) {

for(var i=0;i

也是预加载的经典了，最下面那三行意思是：大概比及笔墨加载完再加载图片。

我一口老血喷出来，假如如许我要你干嘛？？？

ajax方式实现预加载(网上看的，不太发起使用这种方式)：

$(function(){

$.get('图片的路径');

})

/*

固然我们也可以写成一个函数，这里我就不演示了

*/

试验了许多场景，发现正如我上面所说，预加载着实更得当如hover变动后的图片加载(管理闪屏题目)，在网页刚打开的谁人图片情况要求下着实作用真不如懒加载。以是，我们可以将其放在须要相应鼠标变乱(说白了，就是刚上去时不须要瞥见)的地方。

但是我的紧张要求是首屏加载图片优化，进步用户体验，怎么办呢？

预加载似乎帮不了我，，，

思量再三，我决定 “投靠” 懒加载 雄师！

作甚 “懒加载”？

在图片由于某些缘故起因没有表现出来时，用一个占位符去表现，这是进步用户体验的不错方式，现在，京东等商城网站上就用了此技能。

懒加载的英华：不要将真正图片放在src中引入，src中放“占位图”！

为什么使用懒加载：

在一个页面中，假设有20张图片，每张为100kb，用户在不点滚动条的时间看到的只有4张，假如这20张图片都设置了真正的src，那么当页面初次加载的时间欣赏器会立刻哀求这20张图片资源，须要2000kb的流量；

但是我们做懒加载只哀求用户看到的4张图片的话，欣赏器只哀求这4张图片资源，须要的流量只有400kb。这种本事可以大大镌汰首屏时间。

代码展示：

index.html

/*用http方式引入jQuery文件(min指压缩过的)*/

如上，在几张图片中，我们将 真正的图片 放在picAddress中，在src中放 占位图

在js中，页面加载完成后，根据scrollTop判定图片是否在用户的视野内，假如在，则将picAddress属性中的值取出存放到src属性中 (在滚动变乱中重复判定图片是否进入视野，假如进入，则将picAddress属性中的值取出存放到src属性中)。

lazyLoadImg.js

/*

* @example

*

* @param src内里写的是占位图大概说兜底图所在(一张默认添补图)

* @param class="lazyLoadImg" 是必须的标识

* @param picAddress内里写的是真正须要懒加载的图片所在

*/

const lazyLoadImg = {

initConfig() {

const self = this;

self.imgObject.srcFlag = 'picAddress'; // 图片所在

self.imgObject.class = 'lazyLoadImg'; // 惰性加载的图片须要添加的class

self.imgObject.sensitivity = 40; // 鼠标滚动敏感度，该值越小，惰性越强(加载越少)

self.imgObject.init();

},

imgObject: {

trigger() {

const self = this;

const eventType = (self.isPhone && 'touchend') || 'scroll';

self.imgListData = $('img.' + self.class + '');

$(window).trigger(eventType);

},

init() {

var self = this;

$(window).on('scroll', function() {

self.isLoadImg();

});

self.trigger();

},

isLoadImg() {

const self = this;

function loadNeedImg(img) { // 判定哪些img元素须要加载

const windowPageYOffset = window.pageYOffset; // 滚动条间隔窗口顶部的偏移量

const offsetAddInner = window.pageYOffset + window.innerHeight; // window.innerHeight返回窗口的文档表现区的高度

const imgOffsetTop = img.offset().top; // 当前img元素间隔窗口顶部的偏移量

return (

imgOffsetTop >= windowPageYOffset && // 确保img元素在窗口内

imgOffsetTop - self.sensitivity <= offsetAddInner //当前img元素是不是在窗口可见范围内，不可见返回:false

);

}

function loadImg(img, index) {

const imgUrl = img.attr(self.srcFlag);

const imgLazy = img.attr('src');

img.attr('src', imgUrl);

img[0].onload || // 开始向服务器哀求加载图片

((img[0].onload = function() {

$(this)

.removeClass(self.class)

.removeAttr(self.srcFlag),

(self.imgListData[index] = null),

(this.onerror = this.onload = null);

}),

(img[0].onerror = function() {

(this.src = imgLazy),

$(this)

.removeClass(self.class)

.removeAttr(self.srcFlag),

(self.imgListData[index] = null),

(this.onerror = this.onload = null);

}));

}

self.imgListData.each(function(index, val) {

if (!val) return;

const img = $(val);

if (!loadNeedImg(img)) return;

const aa = img.attr(self.srcFlag);

if (!img.attr(self.srcFlag)) return;// 判定是否有规定的picAddress属性，没有则退出当次循环

loadImg(img, index);

});

},

},

};

lazyLoadImg.initConfig();

(这里分析一下，网上有许多jQuery的.lazyload的包，但是个人使用过感觉兼容性和效果都巨差，故而这里提倡本身封装一个js)

我们可以将网络限速将online设成mid-tier mobile大概low-end mobile更轻易看到效果！如下：

分析实用场景，选择符合的方式才华将一个网站打造的更美满。

项目所在：南阳理工学院-优C社团

！