有没有办法,使用jQuery来触发加载CSS背景图像的事件?背景图片加载触发事件
12
A
回答
22
,你可以像这样做,
demo
$('<img>').load(function(){
// make sure to bind the load event BEFORE setting the "src"
alert('image loaded');
}).attr('src',function(){
var imgUrl = $('body').css('background-image');
imgUrl = imgUrl .substring(4, imgUrl .length-1);
return imgUrl;
}).each(function() {
// fail-safe for cached images which sometimes don't trigger "load" events
if(this.complete) $(this).load();
});
2
$('<img>').attr('src',function(){
var imgUrl = $('#body').css('background-image');
imgUrl = imgUrl .substring(5, imgUrl .length-2);
return imgUrl;
}).load(function(){
//Do Something
});
不由得注意到,上面的代码不拨弄工作。看起来像它,因为它返回“url('/ img-path.jpg')”而不是“/img-path.jpg”。
但是这种方法在IE中仍然失败。任何人有一个即修复?
+2
我已经修复根据您的代码和意见接受的答案 – 2012-03-09 19:33:11
2
我发现,IE浏览器的问题是缓存:http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
,所以你可以试试这个:
$(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function(){
//custom code here....
});
0
$(document).ready(function(){
$('img, .hasBGI').css('opacity',0)
$('.hasBGI').each(function(){
var $this = $(this)
$bgi = $('<img src="'+/*folderFix*/$this.css('backgroundImage')+'">')
// $bgi.css(/*hiddingStyle*/)
$('body').append($bgi)
$bgi.load(function(){
$(this).remove()
$this.animate({opacity:1})
})
})
$('img').load(function(){
$(this).animate({opacity:1})
})
})
+0
我的意图是图像平滑下载 – domSurgeon 2013-07-05 15:01:33
相关问题
- 1. 从背景加载图片
- 2. 背景图片未加载
- 3. 加载Javascript事件css背景图像
- 4. CSS背景图片加载行为
- 5. 用jQuery预加载背景图片?
- 6. Angular 2 - 预加载背景图片?
- 7. gif加载后更改背景图片?
- 8. CSS背景图片不会加载
- 9. 链接的背景图片未加载
- 10. 用jquery加载背景图片
- 11. 在flash加载时的背景图片
- 12. 有时仅加载背景图片
- 13. 图片背景缓慢加载
- 14. 被加载的背景图片闪烁
- 15. jQuery .css背景图片预加载
- 16. 事件onclick改变背景图片
- 17. 在Javascript中预加载背景图片 - 事先未声明CSS
- 18. 设置背景图片加载前的网页背景颜色
- 19. 强制在其他背景图片之前加载背景图片
- 20. 叠加在背景图片
- 21. CSS背景图片叠加
- 22. 图片上的黑色背景加载了univerisal图片加载器
- 23. angular2 MDL事件卡ngFor应用ngStyle添加背景图片
- 24. 背景图片
- 25. 背景图片
- 26. 图像载入事件触发图像完全加载之前?
- 27. 背景图片上的背景图像
- 28. 加载时设置片段ID而不触发onhashchange事件
- 29. Cocos2d为图层添加背景图片?
- 30. 触发页面加载事件
的可能的复制[我如何检查是否背景图像加载?](http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded) – azerafati 2016-10-02 12:39:18