<h1>虚拟代理实现图片的预加载</h1>
<p>在Web开发中,图片预加载是一种常见的技术,如果直接给某个img标签节点这只src属性,由于图片过大或者网络不佳,图片的位置往往有一片
空白。常见的做法是先用一张loading图片占位,然后用异步的方式加载图片,等图片加载好了再把它填充到img节点里,这种场景就很适合是用虚拟代理。</p>
<script>
var myImage = (function(){
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src){
imgNode.src = src;
}
}
}());
var proxyImage = (function(){
var img = new Image();
img.onload = function(){
myImage.setSrc( this.src );
}
return {
setSrc: function(src){
myImage.setSrc( "loading.gif" );
img.src = src;
}
}
});
pr
js虚拟代理实现图片的预加载
最新推荐文章于 2022-08-02 10:02:48 发布