jquery nhận kích thước hình ảnh

Question

Tôi đang tạo một thư viện ảnh bằng cách sử dụng jquery. Tôi đang chụp và thay đổi kích thước hình ảnh khi tải để tạo hình thu nhỏ. Tôi muốn có được giá trị ban đầu của kích thước của hình ảnh để sau này tôi có thể đưa nó trở lại kích thước ban đầu của nó. Bất cứ ai biết làm thế nào để làm điều này? Tôi có mã sau đây:

obj.find("img").each(function(){ 
}); 

Vòng này thông qua tất cả hình ảnh trong div vùng chứa. Sau đó tôi đã cố gắng thực hiện:

$(this).width(); //didnt work 
this.width; //didnt work 

bất kỳ ý tưởng nào?

Answer 1

Tôi đã hỏi the same question gần đây và có câu trả lời hay: Phần tử hình ảnh mới được tạo nhưng không được đính kèm với DOM. Chiều cao và chiều rộng của nó là kích thước ban đầu của hình ảnh.

Chỉnh sửa: Tôi đã chỉnh sửa câu trả lời cho câu hỏi của mình ngay bây giờ như đã hứa trong các nhận xét. Việc phát hiện kích thước hình ảnh hiện được gắn với sự kiện onload của hình ảnh để đảm bảo kết quả đáng tin cậy.

Answer 2

Nếu một phần tử được giấu bạn không thể có được kích thước của nó, nếu bạn muốn để có được chiều rộng hoặc chiều cao của nó trước khi hiển thị nó, bạn cần phải cung cấp một tiêu cực bù đắp như

#your_image {left:-1000%;}

chỉ

sau đó

$(this).width()

sẽ trả lại kết quả.

Answer 3

Vấn đề với việc sử dụng jQuery để có được kích thước hình ảnh là thường chúng ta sử dụng $(). Ready (function()); để thực hiện javascript của chúng tôi, nhưng tại thời điểm tải trang, hình ảnh chưa được tải, vì vậy bạn cần đợi điều đó xảy ra trước tiên. Khi bạn đã chắc chắn hình ảnh được tải và hình ảnh hiển thị, bạn có thể sử dụng $ .width() và $ .height() như bình thường.

Một điều bạn có thể thử nếu bạn đang sử dụng ngôn ngữ kịch bản để tạo kích thước hình ảnh là đặt thuộc tính chiều rộng và chiều cao sau khi đọc tệp và nhận kích thước theo cách đó. Kể từ khi bạn đang làm một bộ sưu tập, bạn có thể xem xét thay đổi kích thước hình ảnh của bạn trên backend với imagemagick của gd cho php. Có rất nhiều tài liệu trực tuyến cho những công cụ này, vì vậy tôi sẽ không tham gia ở đây.

Answer 4

$("#your_img").imagesLoaded(function(){<br> 
alert($(this).width());<br> 
alert($(this).height());<br> 
});