首页 > 其他 > 详细

图片由模糊变清楚

时间:2016-02-28 09:46:17      阅读:162      评论:0      收藏:0      [点我收藏+]
<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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!