Chiều rộng và chiều cao của hình ảnh IE = 0 trước khi hình ảnh được tải xuống

Question

Tôi đang cố đặt chiều rộng là thuộc tính chiều cao của một yếu tố hình ảnh mà tôi đã tạo trong javascript. Trong FF, Opera & Chrome nó đặt chiều cao & chiều cao chính xác. Tuy nhiên trong IE 6 & 7 (Chưa thử 8) chiều rộng & chiều cao vẫn là 0 cho đến khi hình ảnh được tải xuống. Lý do tôi cần điều này là để tôi có thể định vị mỗi hình ảnh trong các hàng & cols dựa trên kích thước hiện tại của nó.

Nếu không thể đặt chiều rộng & thuộc tính chiều cao trong IE, tôi nghĩ tôi sẽ chỉ phải tạo thuộc tính tùy chỉnh của riêng mình và đặt nó ở đó.

Đây là mã cơ bản tôi đang sử dụng để tạo phần tử &.

var img = document.createElement('img'); 
var wrap = document.createElement('div'); 

document.body.appendChild(wrap); 
wrap.appendChild(img); 

img.src = 'blah.jpg'; 
img.width = '100'; 
img.height = '100'; 
img.style.display = 'none'; 

// IE: width: 0 | height: 0 
// FF: width: 100 | height: 100 
alert('width: ' + img.width + ' | height: ' + img.height); 

EDIT:

Tôi đã thử đặt img.style.visibility = 'ẩn' thay vì img.style.display = 'none'; nhưng nó không tạo ra sự khác biệt.

EDIT

tôi thấy vấn đề này. Vấn đề thực tế là một sự kết hợp của giải pháp Aziz và một cái gì đó tôi bỏ ra trong ví dụ ban đầu. Có vẻ như trong IE nếu bạn gắn thêm phần tử bên trong phần tử khác trước khi gán chiều rộng là chiều cao &, IE chỉ bỏ qua nó.

Answer 1

This problem is explained here

Để có được kích thước đúng trong IE, bạn cần phải thiết lập display: hidden visibility: hidden. Tuy nhiên, bạn phải chắc chắn rằng bạn đặt nó chỉ khi trình duyệt là IE.

Sửa thử này (chỉ hoạt động đối với tôi)

var img = document.createElement('img'); 

img.src = 'blah.jpg'; 
img.width = '3000'; 
img.height = '1000'; 

img.style.visibility = 'hidden'; 


document.body.appendChild(img); 

// should work correctly 
alert('width: ' + img.width + ' | height: ' + img.height); 

Answer 2

Bạn sẽ cần các đơn vị:

var img = document.createElement('img'); 

img.src = 'blah.jpg'; 
img.style.display = 'none'; 
img.style.width = '100px'; 
img.style.height = '100px'; 

document.body.appendChild(img); 

// IE: width: 100 | height: 100 
// FF: width: 100 | height: 100 
alert('width: ' + img.style.width + ' | height: ' + img.style.height); 

Hãy nhớ thêm các đơn vị "px". Sử dụng element.style.width và element.style.height thay vì element.width và element.height tương ứng để tương thích trình duyệt chéo.