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');
});

Answer 2

改为使用：

$(window).on('load resize', sections);

Answer 3

尝试在加载时使用＆＃39;事件处理程序而不是$（document）.ready：

import multiprocessing

result = multiprocessing.Pool(1).map(huge_intermediate_calc, [something_])[0]

而不是：

$(window).on('load', function() { 
  sections();
});

或者您可以使用：

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

处理这两个事件：）

Answer 4

我相信您正在寻找的是timeout()功能。

如果我的理解是正确的，你可以调用window.timeout([function to call], [time in ms]，并且要执行代码后，要调用的函数将执行很多ms。它不会像sleep()那样等待。

Answer 5

setTimeout(
    function(){
        console.log("this line will be logged with 1000ms delay");
    },1000
)

W3C documentation

如何延迟执行JavaScript？

5 个答案: