In web development, we often need to be online to request picture page display, but in case of bad speed jitter will make the page flicker, or large black and white display, which are seriously affected the user experience, or not in the current picture display area to not request, scroll to the page is loaded, but in the picture area, optimizing network requests, the most common solution is to picture lazy loading, before the real picture is not complete request we give a loading station while the user is prompted to picture images are being loaded. And other image request is completed, the real picture will be replaced or re-request when needed pictures. This post describes the use of proxy mode js achieve this function.
No case of proxy:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
</body>
<script>
// 创建一个本体对象
var pageImage = (function(){
// 创建标签
var imgNode = document.createElement( 'img' );
// 添加到页面
document.body.appendChild( imgNode );
return {
// 设置图片的src
setSrc: function( src ){
// 更改src
imgNode.src = src;
}
}
})();
pageImage.setSrc( 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577767811777&di=e9de4d45feb4f47356a366bd1065b921&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2962937242%2C1933230585%26fm%3D214%26gp%3D0.jpg' );
</script>
</html>
Js loaded using only the pictures, did not meet our expectations
Use Alerts to achieve:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
</body>
<script>
// 创建一个本体对象
var pageImage = (function(){
// 创建标签
var imgNode = document.createElement( 'img' );
// 添加到页面
document.body.appendChild( imgNode );
return {
// 设置图片的src
setSrc: function( src ){
// 更改src
imgNode.src = src;
}
}
})();
// 预加载 loading
pageImage.setSrc( 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577768134810&di=fbbf8c463b60e93573d61b8f88ea9593&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F16f7121aedf9990f3ddd8725e99fe4d8369e06692d18-J0TUcl_fw658' );
// 创建代理对象
var proxyImage = (function(){
// 创建一个新的img标签
var img = new Image;
// img 加载完成事件
img.onload = function(){
// 调用 myImage 替换src方法
pageImage.setSrc( this.src );
}
return {
// 代理设置地址
setSrc: function( src ){
// 赋值正常图片地址
img.src = src;
}
}
})();
setTimeout(function(){
proxyImage.setSrc( 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577767811777&di=e9de4d45feb4f47356a366bd1065b921&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2962937242%2C1933230585%26fm%3D214%26gp%3D0.jpg' );
},1000)
</script>
</html>
Began to show loading
after that:
