问题出现背景
在项目底部导航中，有图片和文字，点击的时候文字和图片不会同时变选中状态，出现的原因是图片延迟加载，解决此问题的方案是实现图片预加载；
解决方法：
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
原文：https://www.cnblogs.com/widgetbox/p/9234850.html