<button id=btnLoad>load</button> <button id=btnToggle style="display:none">toggle</button> <img id=img src=https://d262ilb51hltx0.cloudfront.net/freeze/max/30/1*0oCBXtKSgMEbBlDbvwqC6w.png?q=20 data-src=https://d262ilb51hltx0.cloudfront.net/max/800/1*0oCBXtKSgMEbBlDbvwqC6w.png />
img{
display: block;
width:800px;
height:443px;
}
var src = img.src;
var rawSrc = img.getAttribute(‘data-src‘);
var loadImage = function(url, fn){
var _img = new Image();
_img.onload = function(){
fn(true);
};
_img.onerror = function(){
fn(false);
};
_img.src = url;
};
btnLoad.onclick = function(){
btnLoad.textContent = ‘loading‘;
btnLoad.onclick = null;
btnLoad.disabled = true;
loadImage(rawSrc, function(success){
btnLoad.textContent = success ? ‘load success‘ : ‘load failed‘;
btnToggle.style.display = ‘‘;
img.src = rawSrc;
});
}
btnToggle.onclick = function(){
img.src = img.src === src ? rawSrc : src;
};
原文:http://www.cnblogs.com/fnncat/p/5224055.html