javascript - 如何延迟 JavaScript 的执行？

Question

我是 JavaScript 的新手，对此感到很紧张......

问题的演示在这里:http://codepen.io/sol_b/pen/PzgdWy

这是脚本:

var sections = function() {
  $('.image').each(function() {
    var $this = $(this),
        x = $this.find('img').width()
    $this.width(x);
  });
};

$(document).ready(function() { 
  sections();
 });

$(window).resize(function() {
  sections();
})

图像的宽度被计算并分配给图像的容器。这个想法是图像行将始终保持其纵横比，容器之间没有间隙。

问题是代码大约有 50% 的时间会失败，并且图像会挤在一起。调整窗口大小可以修复它，所以我认为这与加载顺序有关。

我试过使用 window.onload 和 img.onload 而不是 document.ready，但这些都没有解决问题。我错过了脚本中的某些内容吗？

Answer 1

在图像上使用load 并计数直到所有图像都加载完毕，然后执行您的函数。

var images $('.image');
var amount = images.length;

images.on('load', function() {
    if( --amount == 0 ) {
        sections();
    }
});

要防止从监听器执行缓存的图像，您可以手动触发它们(甚至在 window.load 上)。这行将触发缓存元素的事件:

images.each(function() {
    $(this).complete && $(this).trigger('load');
});