我的回答

一、预加载
图片预加载即提前加载图片，可保证图片快速、无缝地发布，用户需要查看时可直接从本地缓存中渲染，适用于图片占据很大比例的网站。

方法1, 在CSS background中加载：会增加页面的整体加载时间
方法2，JS new image对象，设置src加载：
方法3，Ajax预加载,new Image()对象设置src

二、懒加载

将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片

为什么要对图片或视频进行懒加载而不是直接加载？
原因：浪费流量、延长处理时间、浪费手机的电和系统资源

我的回答

什么是预加载?

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到的时候直接从缓存取出资源。

为什么要用预加载?

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的事件。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现一片空白，直到所有内容加载完毕。

实现预加载的几种办法

使用HTML标签

  <img src="http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/webp" style="display:none" />
  //使用image对象
    <sctipt src="./myPreload.js"></script>
   //myPreload.js文件
    var image=new Image()
    image.src="http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/webp"

使用XMLHttpRequest对象

// 使用XMLHttpRequest对象，虽然存在跨域问题，但会精细控制预加载内容
 var xmlhttprequest = new XMLHttpRequest();
 xmlhttprequest.onreadystatechange = callback;
 xmlhttprequest.onprogress = progressCallback;
 xmlhttprequest.open("GET", "http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/web", true);
 xmlhttprequest.send();
 function callback() {
   if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
     var responseText = xmlhttprequest.responseText;
     console.log(responseText)
   } else {
     console.log("Request was unsuccessful:" + xmlhttprequest.status);
   }
 }
 function progressCallback(e) {
   e = e || event;
   if (e.lengthComputable) {
     console.log("Received" + e.loaded + "of" + e.total + "bytes")
   }
 }

使用PreloadJS库

PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。
预加载可以使用HTML标签以及XHR来完成。

默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能会更好。

     //使用preload.js
       var queue = new createjs.LoadQueue();//默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域
       queue.on("complete", handleComplete, this);
       queue.loadManifest([
         { id: "myImage", src: "http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/web" },
         { id: "myImage2", src: "http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/web" }
       ]);
       function handleComplete() {
         var image = queue.getResuLt("myImage");
         document.body.appendChild(image);
       }