java 图片预加载图片_javascript图片预加载

var imgReady = function (url, callback, error) {

var width, height, intervalId, check, div,

img = new Image(),

body = document.body;

img.src = url;

// 从缓存中读取

if (img.complete) {

return callback(img.width, img.height);

};

// 通过占位提前获取图片头部数据

if (body) {

div = document.createElement('div');

div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';

div.appendChild(img)

body.appendChild(div);

width = img.offsetWidth;

height = img.offsetHeight;

check = function () {

if (img.offsetWidth !== width || img.offsetHeight !== height) {

clearInterval(intervalId);

callback(img.offsetWidth, img.clientHeight);

img.onload = null;

div.innerHTML = '';

div.parentNode.removeChild(div);

};

};

intervalId = setInterval(check, 150);

};

// 加载完毕后方式获取

img.onload = function () {

callback(img.width, img.height);

img.onload = img.onerror = null;

clearInterval(intervalId);

body && img.parentNode.removeChild(img);

};

// 图片加载错误

img.onerror = function () {

error && error();

clearInterval(intervalId);

body && img.parentNode.removeChild(img);

};

};