Question

我正在使用这个延迟加载jQuery脚本（http://www.appelsiini.net/projects/lazyload）来延迟加载图像，当它们出现在视口中时，但我想运行一些javascript /样式来设置加载的新的完整图像的样式。

如果图像加载后如何运行javascript？

Answer 1

将处理程序绑定到图像load事件。但请注意，您必须在每个图像前面设置处理程序，因为load事件不会冒出DOM树。这是一种方式：

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

但是，我的经验告诉我，通过此事件，如果您使用onclick属性会更好。我发生这种情况，当你通过jQuery设置处理程序时，一些图像已经加载了。

Answer 2

jQuery Lazy Load plugin有一个名为的回调参数出现，一旦加载，就会触发每张图片。像这样使用它，在这种情况下，例如在图像上加一个红色边框，一旦加载（回调中的 this 引用原始DOM img对象）：

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

虽然我会说，如果你想为图像添加样式，你应该使用css代替。但是有些情况下你实际上想要在图像加载时触发javascript，这似乎是使用延迟加载插件的方法：）

一旦图像被延迟加载，请运行js

2 个答案: