Question

我可以测试一下，但由于互联网速度如此之快，我的图像加载得如此之快，我不确定这是否有效。

我想编写一个函数来获取每个图像的宽度，并在图像加载后重新定位图像。我在想这样的事情，但我不确定这是否有效？

$("#social-media li a > img").each(function () {
    var $this = $(this),
        w1 = $this.parent().width() / 2,
        w2 = $this.width() / 2,
        w3 = w1 - w2;

    $this.load(function () {
        $this.css("left", w3);
    });
});

Answer 1

您可以在窗口加载后进行迭代，然后您不需要等到图像加载试试这段代码

$(window).load(function() {
    $("#social-media li a > img").each(function() {
        var $this = $(this),
                w1 = $this.parent().width() / 2,
                w2 = $this.width() / 2,
                w3 = w1 - w2;

        $this.css("left", w3);
    });
});

Answer 2

首先，请不要使用.load()方法进行事件触发，因为混淆了同名的AJAX方法，所以在jQuery 1.8中已经弃用了它。改为使用.on()方法。

其次，正如documentation中提到的那样：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load()快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：


它不能一致地工作，也不能可靠地跨浏览器。

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

那就是说，我认为David DeSandro的imagesLoaded plugin可能会解决这些问题并为你想要实现的目标而努力。

加载后的每个功能，还是反过来？

2 个答案:

与图像一起使用时加载事件的注意事项