实现图片预加载的几种方式

问题出现背景

在项目底部导航中,有图片和文字,点击的时候文字和图片不会同时变选中状态,出现的原因是图片延迟加载,解决此问题的方案是实现图片预加载;

解决方法:

1、使用css进行图片预加载

body:after {
    content: "";
    display: block;
    position: absolute;
    background: url("../image/...") no-repeat 0 0;
    height: 0
}

原理是加载了该图片,但是我们不显示在可视范围内。这种方式极其简单。但是也有一个致命的弱点,图片跟随文档一同加载,有时候我们为了提高文档的加载速度,那么这种方式方式就不适合了。

2、使用css+js进行图片预加载

.preload-img:after{
            content:"",
            background: url("../image/...") no-repeat 0 0;
        }

/*
    比如我们写了上面的这样一个类,但是页面中没有用到,我们在文档加载完毕之后,给某个元素添加该类
*/

$(function(){
    $("#img").addClass("preload-img")
})

 

 

write by tuantuan

posted @ 2018-06-27 16:55  WidgetBox  阅读(1602)  评论(0编辑  收藏  举报