jquery - 加载后的每个功能，还是相反？

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()方法。

其次，如文档中所述：

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

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

• 它不能始终如一地工作，也不能可靠地跨浏览器。
• 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
• 它没有正确地冒泡 DOM 树
• 可以停止对已经存在于浏览器缓存中的图像进行触发

也就是说，我认为 David DeSandro 的imagesLoaded 插件可能会解决这些问题并为您想要实现的目标工作。