最近遇到一个图片加载优化的问题,我想设置一个背景,但是加载图片是有一定的时间的,于是我就想在图片加载完成之前给个等待的图标,类似 loading,但是不知道怎么判断 css background url() ,如果是图片 img 可以直接用 onload 的方法,请问应该怎么做比较好? 还是应该怎么缓存一张大概 2M 的图片比较好?谢谢大家的指教。
首先没有javascript的event能判断background image的加载状态。这个问题目前最好的解决方法还就是new一个Image,给这个image设置src为background image的路径,然后监听该image的load事件。 具体实现参考 codepen 如果你想用现成的,有人封装了一个jquery插件: waitForImages ,用的也是上面这种方法。 测试过,就算浏览器关闭了缓存,这个方案也是可行的。
var loading = true; var img = document.createElement('img'); img.src = 'url'; img.onload = function(){ loading = false; }
非得用background么?其实你可以吧loading图作为background,那张2m的图片用img就可以了 <img class="bg-img test-img" src="你的2M图片路径"/> .bg-img { background url(loading图片路径) background-size: cover; background-repeat: no-repeat; background-position: center;