自动加载的主要方法
如何确定元素是否显示在窗口的可见范围(在浏览器的顶部和底部之间，肉眼可见)。 编写函数isVisible的实现
功能is visible ($ node ) {
var winHeight=$(window ).height ()//获取视口的高度
varscrollTop=$(window ).scrolltop )//从上到下获取视口的垂直滚动距离
var $offset=$node.offset ().top //将所选元素top获取为距文档的偏移距离
获取包含var $ height=$ node.outheight (true ) margin高度的选定元素
if (winheight scroll top $ offset $ offset $ height scroll top )
返回真；
}else{
返回假；
}
}
}
确定在窗口滚动时一个元素是否出现在视口的范围中。 每次出现都打印true。 用代码实现：
var $div=$('div ' )
$(window ).on )、scroll )、function ) }
$div.not('.show ' ).each () function ) )。
if(isvisible($ ) (this ) ) ) ) ) ) )。
showdiv($ ) this )
}else{
控制台. log (' false ) )。
}
() )
() )
functionshowdiv($div ) {
$ div.each (功能) ) )。
控制台. log (' true ) )。
() )
}
功能is visible ($ node ) {
var winheight=$ (window.height ) )。
var scrollTop=$ (窗口).scroll top (
var $offset=$node.offset.top
var $ height=$ node.outheight (true ) )。
if (winheight scroll top $ offset $ offset $ height scroll top )
console.log(winHeight: )、winheight、) scrollTop: )、scrollTop、($offset: )、$offset、($height360 )
返回真
}else{
返回假
}
}
当窗口滚动时，确定元素是否显示在窗口的显示范围中。 元素首次出现时在控制台上打印true，然后再次出现时不执行任何操作。 用代码实现
var$div=$(div )；
$(window ).on )、scroll )、function ) }
$div.not('.show ' ).each () function ) )。
if(isvisible($ ) (this ) ) ) ) ) ) )。
showdiv($ ) this )
}else{
控制台. log (' false ) )。
}
() )
() )
functionshowdiv($div ) {
$ div.each (功能) ) )。
$(this ).addclass('show ' ) )。
控制台. log (' true ) )。
() )
}
功能is visible ($ node ) {
var winheight=$ (窗口).height )；
var scrolltop=$ (窗口).scroll top )；
var $offset=$node.offset ().top；
var $ height=$ node.outer height (true )；
if (winheight scroll top $ offset $ offset $ height scroll top )
console.log(winHeight: )、winheight、) scrollTop: )、scrollTop、($offset: )、$offset、($height360 )
返回真；
}else{
返回假；
}
}
懈怠图像读取的原理是什么？
自动加载是利用ajax与服务器交换信息，在不重新加载网页的情况下更新网页。 自动加载的目的主要是节省大型网站的流量，让用户看到一个部分，然后加载另一个部分。
对于这个问题，我们想出了解决办法。 在该图像显示在用户的视线范围内之前，不加载该图像。
重要步骤：
判断是否可以看到图像： (如果从画面滚动的高度的窗口高度的图像到页面上部有距离，则可以看到该图像()；
转换图像可视状态：修正图像原始src值。 可以对各图像的src设定相同的初始值。 这样，只有一次发出请求。 如果不设定的话，可能会出现“x”，很难看。 如果显示图像，请更改图像的src属性，以便可以加载图像的内容。
必要的知识点
服务器
npm i -g http-server
http-server -c-1
outline : 1px固态硬盘； 边框与边框不同的是不占地方
页面加载如果页面IMG的高度设置为height:100%，则在页面加载时刷新。 这是因为加载页面时，如果图像没有读完高度就不知道。 消除这个bug的诀窍是在这个IMG中放入DIV制作容器。 然后设定此div的padding-top:100%，在位置上定位img。
无法禁用input功能并点击等。
window.onresize事件在窗口或框架调整大小时发生。
ul.insertadjacenthtml (' before end '，' reuqest.responseText ' )。
通过将String对象拆分为String数组，然后使用指定的分隔字符串将字符串拆分为子字符串，来确定每个拆分的位置。
button.disabled=true/false按钮无效
list.insertadjacenthtml (' before end '，' text ' )将文本内容发送到html的末尾
object.getBoundingClientRect ()获取object相对于视口左上角的绝对位置top bottom left right
document.documentelement.clientheight获取当前视口的高度
html中的img src=' '对应于img src='当前页面地址'。 若要防止浏览器自动添加地址，请在src='about:blank '中单击
预加载有两种方法。
var Imageinload=new Image (； Imageinload.src='xxxx '
$(selector ).not ) #xx选择selector的ID=xx的元素
$(selector ).each(function ) )方法定义要为每个匹配元素执行的函数。
浏览博客