图片由模糊变清楚

1
2
3
<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 />

  

1
2
3
4
5
img{
  display: block;
  width:800px;
  height:443px;
}

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;
};

  

posted @   fnncat  阅读(208)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示