Có cách nào, sử dụng jQuery, để kích hoạt sự kiện khi tải hình nền CSS không?Sự kiện kích hoạt khi tải hình nền
Trả lời
bạn có thể làm điều đó như thế này,
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();
});
Điều này có chờ cho đến khi hình ảnh được tải hoặc cho đến khi có một lợi nhuận trên giá trị của thuộc tính 'background-image'? – Squirkle
thực sự những gì đã xảy ra ở đó là nó sẽ chờ cho hình ảnh tải ... trong trường hợp này là hình nền của thẻ body ... – Reigel
Đó là một mẹo khá gọn gàng. Làm thế nào nó hoạt động? Tôi không thể tìm ra $ ('') nào đang nhắm mục tiêu ... – Squirkle
$('<img>').attr('src',function(){
var imgUrl = $('#body').css('background-image');
imgUrl = imgUrl .substring(5, imgUrl .length-2);
return imgUrl;
}).load(function(){
//Do Something
});
Không thể giúp đỡ, nhưng nhận thấy rằng các mã trên không hoạt động trong fiddle. Có vẻ như nó bởi vì nó trả về "url ('/ img-path.jpg')" thay vì chỉ "/img-path.jpg".
Tuy nhiên phương pháp này vẫn không thành công trong IE. Bất cứ ai có một nghĩa là sửa chữa?
Tôi đã cố định câu trả lời được chấp nhận dựa trên mã và nhận xét của bạn –
tôi thấy rằng vấn đề với IE là bộ nhớ cache: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
vì vậy bạn có thể thử này:
$(”).attr({src: src + ‘?random=’ + (new Date()).getTime()}).load(function(){
//custom code here....
});
$(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})
})
})
Ý định của tôi là hình ảnhSmoothLoad – domSurgeon
- 1. Ngăn sự kiện nhấp chuột kích hoạt khi sự kiện dblclick kích hoạt
- 2. Sự kiện liên kết JQuery khi hình nền CSS được tải đầy đủ
- 3. API toàn màn hình: Sự kiện nào được kích hoạt?
- 4. sự kiện trênTouch đôi khi không kích hoạt ACTION_POINTER_DOWN
- 5. Hình nền động - "Đặt hình nền" - Cần sự kiện để xóa bộ nhớ
- 6. Sự khác biệt giữa Tải sự kiện, Kích hoạt sự kiện và Nhập sự kiện trong Biểu mẫu
- 7. Kích hoạt sự kiện onItemDisclosure gây ra sự kiện itemtap để kích hoạt
- 8. Cách xử lý sự kiện Word DocumentChange vì sự kiện NewDocument không được kích hoạt khi tải
- 9. Lỗi kích hoạt sự kiện tùy chỉnh kích hoạt JQuery
- 10. Javascript: Nhiều sự kiện mouseout kích hoạt
- 11. kích hoạt sự kiện "dán" trong Javascript
- 12. Sự kiện LongClick cũng kích hoạt Sự kiện nhấp
- 13. kích hoạt sự kiện khi thay đổi lớp học
- 14. Kích hoạt sự kiện khi người dùng điều hướng đi
- 15. Sự kiện JAVAFX được kích hoạt khi chọn hộp kiểm
- 16. sự kiện onclick không kích hoạt sau sự kiện onchange
- 17. Kích hoạt tải hình ảnh chậm sau khi hình ảnh đã được thay đổi kích thước
- 18. Sự kiện 'Trước khi tải' tab giao diện người dùng jQuery không kích hoạt
- 19. jQuery: Kích hoạt sự kiện nhấp chuột trên nút radio khi tải trang
- 20. Sự cố IE9 với sự kiện tải jQuery() không kích hoạt
- 21. AjaxFileUpload không kích hoạt Sự kiện OnUploadComplete
- 22. Các sự kiện Jquery .bind được kích hoạt khi chụp sự kiện hoặc bong bóng sự kiện
- 23. Backbone Sự kiện: đăng nhập tất cả các sự kiện khi chúng được kích hoạt
- 24. Sự kiện ASP.Net Session_Start không kích hoạt
- 25. Socket.io kích hoạt nhiều sự kiện
- 26. OnCheckedThay đổi sự kiện không kích hoạt
- 27. UIDeviceOrientationDidChangeThông báo sự kiện không kích hoạt khi người dùng tắt tự động xoay màn hình
- 28. Kích hoạt sự kiện jquery khi một phần tử xuất hiện trên màn hình
- 29. Làm thế nào để kích hoạt một sự kiện khi mô hình Backbone được lưu?
- 30. Sự kiện thay đổi của mô hình sẽ không kích hoạt khi cập nhật mảng?
có thể trùng lặp của [Làm thế nào tôi có thể kiểm tra nếu một hình nền được tải?] (http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded) – azerafati