Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

图片加载也加个进度条吧

  虽然在较新的规范中,IMG标签是支持progress等事件的,但没有浏览器实现它。不过我们依然可以使用程序去加载图片,并实现进度条。只是在跨域问题上需要服务器端协助才能实现。加载后的图片显示可以使用DataURL、BlobURL,甚至直接使用HTTP缓存来再次读取。
  下面的例子中最后使用了BlobURL来显示图片,只是进度条还没有设计样式,简单地用百分比文字来显示而已
<style>
span {
  position:relative;
  border:1px solid #CCC;
  background:#EEE;
  display:inline-block;
  width:200px;height:200px;
  line-height:200px;
  text-align:center;
  font-size:0px;
}
span[data-progress]:before {
  content:attr(data-progress) '%';
  position:absolute;
  font-size:32px;
  color:#666;
  font-family:Verdana;
  vertical-align:middle;
  left:0px;right:0px;
}
span[data-progress] img {
  max-width:100%;max-height:100%;
  visibility:hidden;opacity:0;
  vertical-align:middle;
  transition:all 500ms ease;
}
span[data-progress='100.00']:before {
  position:static;font-size:0px;
}
span[data-progress='100.00'] img {
  visibility:visible;opacity:1;
}
</style>
<script>
onload=function(){
  var url="http://www.web-tinker.com/share/lena_std.png";
  var span=document.createElement("span");
  var img=new Image;
  span.appendChild(img);
  document.body.appendChild(span);
  var xhr=new XMLHttpRequest;
  xhr.open("GET",url,true);
  xhr.responseType="arraybuffer";
  var length;
  xhr.onreadystatechange=function(){
    if(xhr.readyState!=2)return;
    length=xhr.getResponseHeader('Content-Length');
  };
  xhr.onprogress=function(e){
    span.setAttribute("data-progress",(e.loaded/e.total*100).toFixed(2));
  };
  xhr.onload=function(e){
    var mime=xhr.getResponseHeader('Content-Type');
    var blob=new Blob([xhr.response],{type:mime});
    img.src=URL.createObjectURL(blob);
  };
  xhr.send();
};
</script>
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^