vue懒加载

标签：滚动   内容   不同的   检测   body   images   return   页面   比较   

　　当我们进入首页时，可能有很多条目需要显示，但是如果条目太多，我们全部将之显示出来就会造成性能的消耗，比如，我在第一条就找到了需要的或者我就看前面两条我就不想看后面的了，所以，这时候如果使用全部加载的方式无疑是不合适的，比较好的做法就是首先显示一面多的内容，当检测到用户快要（或者已经）下拉到页面底部的时候我们再发出ajax请求来请求更多的内容。 

那么，第一步需要做的工作就是判断何时用户将页面拉到了底部。 

　　body是滚动的wrap，我们可以获得浏览器的高度、body的scrollTop、以及body的scrollHeight， 如果浏览器的高度 + body的scrollTop接近（达到）body的scrollHeight的值得时候，那么说明快要达到底部了。

如何获取浏览器的高度：

function getViewportSize () {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    };
}

这里使用 window.innerWidth 可以准确的获取到浏览器的宽度，通过 window.innerHeight 可以准确的获取到浏览器的高度。  

但是当用户缩放时，window.innerWidth和window.innerHeight的值都会发生变化。其他的也是一样的。 

只是我在做微信网页的时候发现，两者的值时不同的，只有 window.innerHeight才能获取到准确的值，

可以看到，这时的body并没有占满一页，所以这时获得的高度必然不是浏览器的高度。 值得注意，至于为什么，后续我会继续研究。

vue懒加载

标签：滚动   内容   不同的   检测   body   images   return   页面   比较   

原文地址：http://www.cnblogs.com/zhuzhenwei918/p/6938074.html