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

Posted 2020-11-20 widgetbox

问题出现背景

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

解决方法：

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