前言

在写一个懒加载插件时,遇到一个坑,就是this的指向问题,我想这种情况大部分人都会遇到,就写下来,新手也有个参考。

事件

有些页面图片比较多,但用户还不一定会全看,这样的话,全部去加载这些图片,就有点浪费资源了,于是想写一个通用的插件来解决这个问题

想法

根据滚动条高度加屏幕高度来判断是否加载这张图片,需要懒加载的图片这样写

<img data-src="image/bg.jpg">

凡是加上这个属性的都会做懒加载处理。

this之坑

以下是最终的代码

function SetImg(top){
var imgs = Array.prototype.slice.apply(document.getElementsByTagName("img"));
this.imgs = imgs.filter(function(item,index){
return item.dataset.src;
});
this.top = top || 150;
}
SetImg.prototype = {
init:function(){
this.event();
},
setSrc:function(){
if(this.imgs.length===0){
window.removeEventListener("scroll",this.setSrc);
};
var _this = this;
this.imgs.forEach(function(item,index){
if(document.documentElement.clientHeight+document.body.scrollTop+_this.top>item.offsetTop||item.offsetTop<document.documentElement.clientHeight){
item.src = item.dataset.src;
_this.imgs.splice(index,1);
}
})
},
event:function(){
this.setSrc = this.setSrc.bind(this);
window.addEventListener("load",this.setSrc);
window.addEventListener("scroll",this.setSrc);
}
};
new SetImg().init();

这个代码已经解决了this的指向问题,也就是下面这句

this.setSrc = this.setSrc.bind(this);

一开始是没有这句话的,但问题是,我在setSrc里面使用了this,而恰恰那里面的this指向的是window,为什么指向window?因为这句话

window.addEventListener("load",this.setSrc);
window.addEventListener("scroll",this.setSrc);

我们说this始终指向一个对象,而现在给添加的事件,就是在window身上添加的,正如

element.addEventListener("click",fn);

这句不就是指向element吗,那上面的那个指向window,也就不足为奇了。因此这也是为什么最后我添加这么一句

this.setSrc = this.setSrc.bind(this);

其实一开始我没想要这么做,但这也是迫不得已的事,一开始我是这样写的:

window.addEventListener("load",this.setSrc.bind(this));
window.addEventListener("scroll",this.setSrc.bind(this));

但这样的问题是,bind返回的是一个新对象,而不是原本的this.setSrc。一般情况下,这也不是什么大问题,但坑就坑在this.setSrc里面的这句

if(this.imgs.length===0){
window.removeEventListener("scroll",this.setSrc);
};

看似一切都正常,但这是一个大坑,这里面的this.setSrc指向的是SetImg.setSrc,而

window.addEventListener("scroll",this.setSrc.bind(this));

this.setSrc.bind(this)这是一个新对象,因此你根本就无法remove掉这个新对象。所以最终才想出个迫不得已的方法就是让this.setSrc变成新的那个对象。

可能有些朋友,不太懂为什么要写这么一句:

if(this.imgs.length===0){
window.removeEventListener("scroll",this.setSrc);
};

这句话的作用是,如果所有图片都加载完毕了,这个滚动事件,就不需要了。当然如果你直接使用window.onscroll这种情势来写,或许这个问题可以很好的解决,但作为一个插件用addEventListener是迫不得已的,因为我不知道哪个页面使用了onscroll事件,如果我直接那样写,就会把其他人写的事件覆盖掉。

结语

这种情况出现的概率还是蛮高的,导致这种问题的出现就是,事件里面的this和构造函数里面的this,指向的是不同的对象,所以啊这就是坑点。

说到正题,这个插件还不能用T_T,再改改吧

05-04 01:41