自动加载、懒加载和预加载

自动加载

自动加载就是符合某些条件时才加载某些图片。

现在好多的网站都用到了自动加载图片技术，比如淘宝，刚打开淘宝时，加载一部分图片，在你浏览的过程中，往下拉再加载一部分图片，再往下拉的时候再加载一部分图片。

代码实现

    

    
    

        加载更多
    
    

// JSON
    {
    "content":[
        {"url":"//via.placeholder.com/200x200?text=0.145596","text":"这是第 10 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.186863","text":"这是第 11 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.102256","text":"这是第 12 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.156688","text":"这是第 13 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.120045","text":"这是第 14 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.132079","text":"这是第 15 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.158627","text":"这是第 16 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.132366","text":"这是第 17 段话"},
        {"url":"//via.placeholder.com/200x200?text=0.146998","text":"这是第 18 段话"}
    ],
    "hasNextPage":true
}

顺便学习了 Flex 布局，图片实现等比例缩放。

什么是懒加载

懒加载就是延迟加载图片或符合某些条件时才加载某些图片。

懒加载的原理是什么

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-xxx”属性里，要用的时候就取出来，再设置；

懒加载就是在自动加载的基础上，增加了下面的代码。

window.onscroll = function(){
  var images =document.querySelectorAll('img[data-xxx]');
  for (var i=0;i

什么是预加载

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

预加载实现有两种方法

var loadingImage = new Image();
loadingImage.src="images/big.jpg";

服务器

npm i -g http-server
http-server -c-1