js利用Image對象賦值src,將圖片緩存到瀏覽器

創建一個全局數組變量用於存儲Image對象

var images = [];

創建Image對象並賦值src,將圖片緩存到瀏覽器

function preload() {
   for (i = 0; i < preload.arguments.length; i++) {
      images[i] = new Image();
      images[i].src = preload.arguments[i];
   }
}

通過ajax獲取頁面將要加載的圖片地址

function ajaxGetImgstr() {
  //創建xhr對象
  var xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  //異步接受響應
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var data = JSON.parse(xhr.responseText); //data是一個數組，數組項為圖片地址
      console.log(data);
      preload(...data);
    }
  }
  //發送請求
  xhr.open('get', 'http://xxx/xxx/xxx', true);
  xhr.send();
}

利用西蒙·威利森 (Simon Willison)——jQuery框架的開發者之一編寫的addLoadEvent函數

function addLoadEvent(func) {
  var oldonload = window.onload;//將現有的事件處理函數的值存入變量中
  if (typeof window.onload != 'function') {
    window.onload = func;//如果這個事件處理函數沒有綁定任何函數，就把新函數添加給它
  } else {
    window.onload = function() {
     oldonload();
      func();//如果已經綁定了函數，就把新函數追加到現有指令的末尾
    }
  }
}

將ajaxGetImgstr添加到頁面加載完成后要執行函數中

addLoadEvent(ajaxGetImgstr);