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);