正確的jQuery圖片load（）？

Question

<script type="text/javascript">
jQuery(document).ready(function(){
setTimeout(function(){
    jQuery('.my-image').each(function(){
        jQuery(this).greyScale({
            fadeTime: 200,
            reverse: false
        });
        $(this).animate({ 'opacity' : 1 }, 1000);
        $(this).load(function(){
            jQuery(this).greyScale({
                fadeTime: 200,
                reverse: false
            });
            $(this).animate({ 'opacity' : 1 }, 1000);
        });
    });
}, 200);
});
</script>

在上面的示例中，我使用了greyScale（）函數，該函數將圖像復制到畫布中並保留兩個版本（灰色=默認值，顏色=懸停）。

在瀏覽器首次運行時，它可以在99％的時間內正常運行，但有時無法加載1張圖片，2張圖片或類似的圖片。 就像“加載”和“正常事件”都無法正常工作一樣。

有人可以確認我做得對嗎？ 如果圖像已經存在或不存在，我會嘗試加載該事件，然后使用替代的“ load（）”以確保圖像一旦加載就將執行。 從邏輯上講，這似乎是一個很好的解決方案。

Answer 1

測試圖像是否已加載的一種好方法是嘗試訪問其尺寸，如果可以獲取圖像的高度或寬度，則可以假定圖像已加載並灰度。 因此，您可以修改代碼來執行以下操作：

jQuery('.my-image').each(function()
{
    var greyscale = function(image)
    {
        jQuery(image).greyScale({
            fadeTime: 200,
            reverse: false
        });
    }

    if ( jQuery(this).width() )
    {
        // it's loaded, greyscale its ass
        greyscale( this );
    }
    else
    {
        // wait for the load
        $(this).load(greyscale);
    }
});

在這種情況下，由於您希望圖像首先是灰度的，因此建議您以編程方式插入圖像：

在<img>標簽所在的位置，將其替換為<div>標簽，並在其中添加data-src屬性，其中將包含圖像的URL。

加載文檔后，請使用遍歷所有<div>標簽的腳本並將<img>標簽插入<div>標簽內，例如：

jQuery('div.my-image').each(function()
{
    var el = jQuery( this );

    // get the src for the image
    var src = el.data( 'src' );

    // start loading the image
    var img = new Image();

    img.onload = function()
    {
        // greyscale it
        jQuery(img).greyScale({
            fadeTime: 200,
            reverse: false
        });

        // append it
        el.append( img );
    }

    // load the image by setting the src
    img.src = src;
});

Answer 2

.load()可能是一個棘手的問題，但是類似這樣的事情應該起作用（注意this.complete檢查）：

jQuery('.my-image').each(function(){
    $(this).load(function(){
        jQuery(this).greyScale({
            fadeTime: 200,
            reverse: false
        });
        $(this).animate({ 'opacity' : 1 }, 1000);
    });

    if (this.complete) {
      $(this).trigger('load');
    }
});

盡量避免重復代碼，這不是最佳實踐。

Answer 3

不要依賴.load()函數獲取圖像。

甚至jQuery也這樣說。

與圖像一起使用時加載事件的警告

開發人員嘗試使用.load（）快捷方式解決的一個常見挑戰是，在完全加載圖像（或圖像集合）后執行函數。 有幾個已知的注意事項，應該注意。 這些是：

它不能始終如一地工作，也不能可靠地跨瀏覽器運行如果圖像src設置為與以前相同的src，則無法在WebKit中正確觸發不能正確冒泡DOM樹可以停止為已經存在的圖像觸發在瀏覽器的緩存中

在這里閱讀

如果可以的話，使用它，

$(window).load(function(){
    // Images are now loaded for sure
})

編輯：

或使用Paulirish的精簡jQuery插件

imageLoaded