前端性能优化成神之路--图片预加载

什么是预加载和为什么要用预加载

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。提升用户体验

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

预加载方式一：使用HTML标签

一个img标签，当浏览器读到这个标签的时候会去请求图片下来，但是设置的display为none是看不到的，其实图片是已经请求回来了，需要用到的时候改变display属性值为可见即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>
<div id="test">
  <img src="http://pic1.16pic.com/00/39/01/16pic_3901452_b.jpg" style="display: none">
</div>
<script type="text/javascript"></script>
</body>
</html>

预加载方式二：原生js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>
<div id="test">
  <img src="">
</div>
<script src="./myPreload.js"></script>
<script type="text/javascript">
  alert(image) // 请求回来的图片，赋值给img标签的src属性即可
</script>
</body>
</html>

// 使用Image对象
var image = new Image()
image.src = "http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg"

预加载方式三：使用XMLHttpRequest对象

该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

虽然存在跨域问题，但会精细控制预加载过程

// 使用XMLHttpRequest对象
var xmlhttprequest = new XMLHttpRequest();

xmlhttprequest.onreadystatechange = callback;

xmlhttprequest.onprogress = progressCallback;

// 跨域报错：test2.html?_ijt=orag7v5th0gt7jdlt39q1a4lnc:1 Access to XMLHttpRequest at 'http://image.baidu.com/mouse.jpg' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xmlhttprequest.open("GET","http://image.baidu.com/mouse.jpg",true);

xmlhttprequest.send();

function callback () {
  if (xmlhttprequest.readyState == 4 && xmlhttprequest.status==200){
    var responseText = xmlhttprequest.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")
  }
}

预加载方式四：使用预加载插件：preload.min.js

PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好（创建队列的时候，参数为false）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>
<script src="./preload.min.js"></script>
<script type="text/javascript">
  var queue = new createjs.LoadQueue(false); //创建一个预加载的队列，false表示用html的方式去预加载

  queue.on("complete", handleComplete, this);

  queue.loadManifest([
    {id: "myImage", src:"http://pic1.16pic.com/00/39/01/16pic_3901452_b.jpg"},
    {id: 'myImage2', src:"http://img1.imgtn.bdimg.com/it/u=2170181592,3687497255&fm=26&gp=0.jpg"}
  ]);

  function handleComplete() {
    var image = queue.getResult("myImage2");  // 获取队列中的资源
    document.body.appendChild(image);
  }
</script>
</body>
</html>

lblog_my2aqmiz

前端性能优化成神之路--图片预加载