要如何检测css文件中的引用的图片已下载完成?
js中,创建一个Image对象
然后可以检测是否已完成请求
如
var image = new Image();
image.url = XXX.png;
image.onload(function() {
//这里做些事
});那css文件中的引用的图片可以检测到是否已完成请求图片的步骤呢?
例如
.page1 {
background: url(XXX.png);
}我要怎么样才能知道这个XXX.png是否已经完成加载了呢?
简单来说,我想在图片加载完成之前先给一个用loading页
在全部的图片(包括页面中标签和css中的引用图片)加载完成后再展示页面
应该怎样做?
展开
收起
1
条回答
写回答
写回答
-
IT从业成的解决方案在这里：https://github.com/alexanderdickson/waitForImages
简单的说，当样式应用于 DOM 对象的时候，我们可以通过 DOM.style 获取到它的值（比如 backgroundImage），然后取出其中 url() 里面的路径。一旦你得到这个路径就可以用你问题里描述的方法来检测了。
这个插件的基本原理就是这样，只不过要解决递归向下查找的问题，然后等待所有加载完成之后再构造一个自定义事件供你捕获。另外它除了传统的 callback 形式调用以外，还为你提供了 jQuery 兼容的 promise，比较好用。
2019-07-17 19:26:26赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
