javascript crossbrowser new Image()

Question

Có gì sai với chức năng này? Nó hoạt động trong Opera và Firefox, nhưng doens't làm việc trên Safari dưới Windows

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {}; 
} 

khi tôi cố gắng getImage ('http://site.com/someservlet.gif') Hình ảnh này không được nạp (vì someservlet.gif bản ghi tất cả các yêu cầu) nó hoạt động trong Opera và Firefox, nhưng không có trong Safari. Tôi đã thử "Hình ảnh mới()" và "document.createElement ('img')" - cùng một kết quả.

========== UPDATE: Chức năng hoạt động tốt khi nó được gọi là trực tiếp, vấn đề bắt đầu khi nó được gọi là từ sự kiện người nghe

<a href="http://google.com/" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">google</a> 

<a href="#" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">local</a> 

<script type="text/javascript"> 
function getImage(url) { 
    var image = document.createElement('img'); 
    alert('1'); 
    image.onload = function() {alert(image.src);}; 
    image.src = url; 
    alert('2'); 
} 
</script> 

"địa phương" liên kết hoạt động tốt trong Firefox, Opera và Safari (nhưng Safari hiển thị alert1, alert2 và sau đó cảnh báo với "src" vì lý do nào đó, trong khi các trình duyệt khác hiển thị alert1, alertSrc, alert2)

liên kết "google" Opera, Firefox - hoạt động tốt (alert1, alertSrc, alert2), nhưng Safari không hiển thị alertSrc. Trong Safari bạn thấy alert1, alert2 và thats tất cả. Servlet "/pic/img.gif" không nhận được yêu cầu khi ai đó nhấp vào liên kết "google" từ Safari.

Vấn đề là gì, cách giải quyết?

Cảm ơn.

Answer 1

Ấn tượng đầu tiên của tôi là bạn gặp phải một số mã tối ưu trong trình duyệt ngăn tải ảnh không được hiển thị. Cho đến nay:

Safari 4.0.2 (530.19.1):

• công trình đối với tôi, như mô tả (cả địa phương, google, và khi tôi thay đổi sự kiện để di chuột)
• Trật tự của các cảnh báo là alert1, alertsrc, alert2

Firefox hàng đêm (3.5.3pre, 20.090.805):

• tác phẩm như đã mô tả. Buồn cười, vì nó không hoạt động lúc đầu. Hãy thử tải hình ảnh vào bộ nhớ cache của bạn, xem nó có ảnh hưởng đến thử nghiệm hay không.
• Trật tự của các cảnh báo là alert1, và sau đó alertsrc và alert2 cùng lúc (di chuyển hộp thoại để xem cả hai)

Google Chrome (2.0.172.39):

• công trình như trong Safari, mặc dù mouseover dường như bắn quá nhiều sự kiện
• Trật tự của các cảnh báo là alert1, alert2, alertsrc

Internet Explorer (7.0.6001.18000)

• hoạt động như được mô tả (cả cục bộ, google và khi được thay đổi để di chuột qua)
• yêu cầu cảnh báo là alert1, alertsrc, alert2

Hãy nhớ rằng tôi đã thay đổi vị trí hình ảnh thành http://www.google.com.ar/images/nav_logo6.png vì tôi không có tập lệnh hình ảnh ngẫu nhiên chạy ngay bây giờ. Dựa trên điều này, tôi khuyên bạn nên chạy thử nghiệm với các hình ảnh khác nhau và thử hình ảnh không tồn tại, hình ảnh trong bộ nhớ cache, hình ảnh không có trong bộ nhớ cache của bạn.

Lý do cảnh báo không nhất thiết theo thứ tự là các trình duyệt khác nhau tải hình ảnh theo các đơn hàng khác nhau và cảnh báorc chỉ xảy ra sau khi hình ảnh được tải. Một kiểm tra tốt nếu một hình ảnh được tải hay không là nếu chiều rộng là 0.

Answer 2

thử ví dụ này trong IE và Safary và hoạt động hoàn hảo.

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {alert('ok');}; 
} 
getImage("http://www.google.com.ar/images/nav_logo6.png"); 

Answer 3

Cách duy nhất tôi không thể làm cho nó làm việc trong IE là sử dụng Hình ảnh mới() hơn document.createElement. Điều đó có thể khắc phục được bằng cách di chuyển image.src đến sau hàm onload của bạn:

image.onload = function() {} 
image.src = url; 

Answer 4

Tôi nghĩ rằng đó là sự cố bộ nhớ cache.
Khi bạn nói image.src = url; javascript ngay lập tức sẽ tìm nạp hình ảnh và nếu hình ảnh được lưu vào bộ nhớ cache, trình duyệt sẽ chỉ sử dụng hình ảnh được lưu trong bộ nhớ cache và kích hoạt onload, và bây giờ bạn nói image.onload = function() {}; nhưng onload đã bị sa thải, vì vậy function() không bao giờ gọi là.

Dù sao, đây chỉ là suy đoán của tôi, tôi không chắc mình có đúng không. Tuy nhiên, Nếu tôi đúng, bạn sẽ có thể sửa chữa nó bằng cách di chuyển image.src = url; dưới image.onload = function() {};