首页 > 代码库 > 图片预加载,按需加载
图片预加载,按需加载
我们经常会遇到一些这样的情况。
1、页面布局时有些图片是用img标签包起来,有些是作为background-image,当用户的网络是龟速时,你会很明显的发现img标签的图片会先被加载,然后background-image的图片是最后才被加载,这时,你会发现页面用户体验非常差,background-image没渲染出界面,界面有点丑漏。
2、我们希望图片是要按照我们预先按排的顺序一张张的被加载。
3、图片想什么时候加载就什么时候加载
用JS可以这样实现:
比如我的背景图片预加载:
function loadImage(url){ var img = new Image(); img.src = url;}var bg_imgs = new Array("/images/home/bottom_bg.png","/images/home/bottom_bg2.png","/images/home/bottom_bg3.png","/images/sub/mid_bg.jpg","/images/sub/mid_bg2.jpg","/images/sub/mid_bg3.jpg");for(var i=0;i<bg_imgs.length;i++){ loadImage(bg_imgs[i]);}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。