起首有一个题目
src和href属性都用来包括一些外部的实体,那末有什么区别?
src:source用于替换元素(replaced elements简而言之,就是表面和尺寸由外部资本来定义,有img,button,textarea,input,select,object)。
href:Hypertext Reference,指定了web资本的定位。因而定义了一个衔接或许如今元素之间的关联(比方锚和目的地),或许是当前文档(比方link标签)和属性定位的资本间的关联。
所以我们如许写<link href="style.css" rel="stylesheet" />
阅读器就可以明白这是一个款式表,而且剖析(parse)页面的时刻不会中缀(然则能够由于阅读器须要根据款式来绘制衬着界面而中缀衬着render)。跟把一切css文件倒到style标签不一样。因而也发起用link,不要用 @import来导款式表 。
src属性只是在当前的文本元素定义的处所嵌套了一个资本。
比方当阅读器看到<script src="script.js"></script>
页面的下载和处置惩罚会被停止,直到阅读器猎取,编译,实行了文件。相似于把一切的js文件都倾倒在script标签里。img标签也是相似的。只是一个空标签,内容由src定义,阅读器会停息加载,直到猎取和加载完图象。
这也是为何要把js文件放在body的末了的缘由。
参考来自http://stackoverflow.com/ques…
想到了一个有意思的完成。
先不给img标签加上src,直到阅读到了这个位置再加载。关于挪动端,还能省流量。
所以来完成一下。
第一个题目在于猎取图片间隔可见局限下边的间隔。
几个尺寸属性参考http://www.jianshu.com/p/187c…
先猎取元素间隔上边的间隔,再猎取屏幕可用高度,以及滑动高度。
从而获得间隔视图下方的高度。
第二个题目在于撙节,总不能每滑动一下都实行一遍。有两个完成。同步和异步的体式格局各完成了。
handleScroll=(callback)=>{
let previousCall=new Date().getTime();
return (e=>{
let diff=new Date().getTime()-previousCall
if(diff>INTERVAL){
callback.apply(null,arguments);
previousCall=new Date().getTime();
}
})
}
window.addEventListener('scroll',handleScroll(checkImgs));
//或许
let wait=false;
ontimeLoad=(e)=>{
if(!wait){
wait=true;
setTimeout(function(){
wait=false;
checkImgs();
},10);
}
}
window.addEventListener('scroll',ontimeLoad);
不过第一种的话有个题目,就是不能removeEventListener了