存在$（'img'）。load（function（）{something}）;在ie和firefox

這是我的代碼。這使圖像與類productImage垂直居中。我在課堂上有一堆圖像。這在鉻中工作正常。但在ie和Firefox中間歇性地。我無法弄清楚發生了什麼事。我認爲這與圖像加載時有關係。我雖然通過綁定負載事件到每個圖像，它會一直等到每個圖像加載，直到它觸發，但它不是......有時。任何人都可以對此有所瞭解嗎？

$('img.productImage').each(function(){ 
var jproductImage = $(this); 

jproductImage.load(function(){ 
    jproductImage.css({ 
    'margin-left' : -jproductImage.width()/2 + 'px', 
    'margin-top': -jproductImage.height()/2 + 'px' 
    }); 
}); 

});

謝謝，馬特

來源

2011-06-22 polyhedron

我想冒險一個猜測，你是否已經設置了圖像的src之後，爲加載事件*添加了一個處理程序。這意味着處理程序可能會錯過該事件。嘗試在擁有處理程序後設置'src'。 – 2011-06-22 17:16:47

這可能是因爲瀏覽器緩存了圖像，從而阻止了.load事件的發生。您可以通過測試.complete屬性中的每個圖像上解決這個問題，並在那裏設置，手動觸發事件.load：

$('img.productImage').one("load",function() { 
    $(this).css({ 
     'margin-left': $(this).width()/2 + 'px', 
     'margin-top': $(this).height()/2 + 'px' 
    }); 
}).each(function() { 
    if(this.complete) $(this).trigger("load"); 
});

另外，你的外.each是有點多餘。以上是所需要的。

來源

2011-06-22 17:16:42 karim79

.load是圖像，跨瀏覽器根本不可靠。例如，從緩存中加載圖像時，Firefox不會觸發它。檢查出jQuery docs for .load。

一個部分讀取：

與圖像

使用時加載事件的

告誡

開發嘗試使用.load要解決的共同挑戰（）快捷方式是執行一個功能時的圖像（或圖像集合）已完全加載。有幾個已知的警告與此應該注意。它們是：

這並不一致，也不可靠地工作，跨瀏覽器的
它不正確的WebKit如果圖像的src設置爲相同的SRC，因爲它沒有正確地泡了之前
火DOM樹
可以停止火已經生活在瀏覽器的緩存

以我的經驗圖像，創建圖像對象，結合一個處理程序，它的負載事件，然後設置SRC工作更可靠，如果是策略是可能的。

來源

2011-06-22 17:14:46

「對已存在於瀏覽器緩存中的圖像可以停止觸發」 - true，AFAIK可以通過手動觸發緩存圖像的'.load'事件來處理跨瀏覽器。 – karim79

@ karim79非常瞭解，謝謝你的提示。 –

這是什麼-之前jproductImage？

$('img.productImage').each(function(){ 
    var jproductImage = $(this); 

    jproductImage.css({ 
    'margin-left' : '-'+jproductImage.width()/2 + 'px', 
    'margin-top': '-'+jproductImage.height()/2 + 'px' 
    }); 

});

這是你在找什麼？

來源

2011-06-22 17:15:45 genesis

這是設定一個負邊距。我將類productImage設置爲top：50％，left：50％，因此將圖像的左上角居中。然後我回去並將邊距設置爲寬度/高度的-1/2。 – polyhedron

並且我的解決方案工作嗎？ – genesis

存在$（'img'）。load（function（）{something}）;在ie和firefox

回答

相關問題