一旦圖像被延遲加載，請運行js

Question

我正在使用這個懶惰的加載jQuery腳本（ http://www.appelsiini.net/projects/lazyload ）來延遲加載圖像，當它們出現在視口中時，但我想運行一些javascript /樣式來設置新的，完整的樣式加載的圖像。

如何在加載圖像后運行javascript？

Answer 1

將處理程序綁定到圖像加載事件。 但請注意，您必須在每個圖像之前設置處理程序，因為load事件不會冒出DOM樹。 這是一種方式：

$('#img').on('load', function() {
    //do some styling...
});

但是，我的經驗告訴我，如果使用onclick屬性，使用此事件會更好。 我發生這種情況，當你通過jQuery設置處理程序時，一些圖像已經加載了。

Answer 2

jQuery Lazy Load插件有一個名為appear的回調參數，一旦加載，就會為每個圖像觸發。 像這樣使用它，在這種情況下，例如在圖像上加上紅色邊框，一旦加載（ 這在回調中引用原始DOM img對象）：

    $(document).ready(function () {
        $("img").lazyload({
            appear: function () {
                //Image is loaded. Put javascript here.
                this.style = "border: 1px solid red";
            }
        });
    });

雖然我會說，如果你想為圖像添加樣式，你應該使用css代替。 但是可能有些情況下你實際上想要在圖像加載上觸發javascript，這似乎是使用延遲加載插件的方法:)