jQuery chiều rộng() trả về 0

Question

thể trùng lặp:
Official way to ask jQuery wait for all images to load before executing something

Tôi đang viết một plugin jQuery để xử lý một loạt các hình ảnh động hình ảnh với một cuộc gọi đơn giản để các plugin function (giống như $("#image1").anims() trong đó #image1 là hình ảnh), tuy nhiên là một phần chức năng của plugin tôi sử dụng $(this).width() để lấy chiều rộng của hình ảnh ngay tại đầu của cuộc gọi hàm.

Tuy nhiên, vì chức năng plugin được gọi là $(document).ready, nên cố gắng lấy chiều rộng của hình ảnh trước khi hình ảnh được tải, vì vậy nó luôn trả về 0. Có cách giải quyết nào cho điều này không?

Answer 1

Bạn có thể sử dụng chức năng setTimeout() để trì hoãn quá trình thực thi đủ dài để tải hình ảnh.

Dưới đây là một ví dụ về cách thức hoạt động:

setTimeout("alert('hello world');", 5000); 

Đối số đầu tiên là một chuỗi động cơ javascript của bạn sẽ phân tích như thực thi mã và đối số thứ hai là một giá trị số nguyên đại diện cho bao nhiêu mili giây mà bạn muốn để trì hoãn trước khi mã trong đối số đầu tiên của bạn thực hiện.

Answer 2

Tôi tin rằng bạn có thể sử dụng

$(this).ready(function() { 
    // stuff with $(this).width() in here 
}) 

Tôi không nghĩ .ready() là độc quyền cho tài liệu.

Answer 3

Vào thời điểm $(document).ready được gọi, hình ảnh phải đã được tải. Cái gì khác là sai.

Nếu bạn cần biết chiều rộng của hình ảnh trước khi bắt đầu hoạt ảnh, nhưng hình ảnh cần ở trạng thái ẩn khi hoạt ảnh bắt đầu, bạn có thể chụp chiều rộng của hình ảnh bằng cách sử dụng .width() trước hoạt ảnh và gọi .hide() hoặc bất cứ điều gì khác là thích hợp, ngay lập tức sau khi đo chiều rộng.

Answer 4

Bạn có thể tải trước hình ảnh

var oImage = new Image(); 

oImage.onload = function(){ 
    this.width// width of loaded image 
} 

oImage.src = '/path/to/image.gif'; 

$ (document) .ready sẽ không chờ đợi cho hình ảnh để tải, nó đợi cho dom phải sẵn sàng.

Answer 5

http://docs.jquery.com/Events/load

$("#image1").load(function() { 
$("#image1").anims(); 
}); 

Answer 6

Thực hiện fadeIn trước khi đọc bất kỳ kích thước:

$('#image').fadeIn(10,function() { 
    var tmpW = $(this).width(); 
    var tmpH = $(this).height(); 
}); 

Answer 7

Nếu bạn đang interjecting html đáng tin cậy với jQuery.append() hoặc jQuery.html() vào "element1" và giá trị css của element2 của bạn có thể là div hoặc span được thả sang trái để phù hợp với element3 bạn sẽ không thể lấy offsetWidth, clientWidth, naturalWidth (google crome) của element3 với một bộ kích hoạt sự kiện mới.

var element1 = $('div.container'); 
while(i<=length){ 
var element2 = $('<span/>').attr({'id':''+[i]+'','class':'container'}); 
var element3 = $('<img/>').attr('src':''+source[i]+'','class':'img'); 
$(element1)children().remove(); 
$(element2).appendTo(element1).append(element3); 
var elms = $(element3); 
var chwidth = elms[i].offsetWidth // returns 0; 
++i; 
}; 

những gì bạn có thể làm là trả lại độ rộng ngữ cảnh của các phần tử trước khi chúng được tải.

while(i<=length){ 
$(element1).children().remove(); 
$(elemen2).appendTo(element1).append(element3); 
var elms = $(element3); 
var newelms = elms[i].load(); 
var chwidth = newelms[i]['context'].width // returns element3's contextual width 
if(chwidth != 0) // make sure only the proper width is returned 
var width = chwidth; 
++i; 
}; 

Nếu điều này không làm việc sau đó thử:

while(i<=length){ 
$(element1).children().remove(); 
$(elemen2).appendTo(element1).append(element3); 
var elms = $(element3); 
var newelms = elms[i].load(function(){ 
//get the widths inside the load context 
var width = this.width(); 
//pass the single width or el[i].width to next function 
}; 
++i; 
}; 

Answer 8

Interjecting HTML đáng tin cậy và nhận được widths mà không gây ra một sự kiện mới có thể được thực hiện bằng cách truy cập vào bối cảnh DOM của nó sau khi HTML đáng tin cậy được xen vào với document.getElementById() như vậy:

var element1 = $('element#one'); 
var element1id = element1.attr('id'); 
var newElement1 = document.getElementById(''+element1id+''); 
var newElement2 = newElement1.children; 
var widths = []; 
for (var i = 0; i < newElement2.length; ++i) { 
    var img = newElement2[i].children; 
    widths[i] = img[0].width; 
} 

Sau đó, chỉ cần sử dụng các mảng widths để có được độ rộng.