jQuery / JavaScript 不会一直执行答案

【问题标题】：jQuery / JavaScript is not executed all the timejQuery / JavaScript 不会一直执行
【发布时间】：2017-10-22 09:47:37
【问题描述】：

我想在 image_1 和 image_2 完全加载后显示内容。但是，它没有按预期工作

var loading = 0;

(function() {
  $(".image_1").on('load', function() {
    console.log('loading image_1');
    loading++;
    checkLoading();
  });

  $(".image_2").on('load', function() {
    console.log('loading image_2');
    loading++;
    checkLoading();
  });
})();

function checkLoading() {
  console.log('inside Loading check');
  if (loading == 2) {
    console.log('loading done' + loading);
    $('#loader-wrapper').fadeOut('fast').remove();
  }
}

此功能并非一直有效。它被添加在 php 文件的页脚中。

有时，它会成功删除#loader-wrapper。但很少有其他时候，#loader-wrapper 没有从 DOM 中删除，我当时没有看到任何 console.log 信息。

【问题讨论】：

也许你的自执行函数在图像出现在页面之前被调用，或者相反，图像已经加载，所以 onload 不会触发。
图像是如何被加载的……它是否在发出 HTTP 请求……？？如果是，则使用承诺
图片刚刚加载到img标签中
@Mouser 你是对的。它们必须在脚本开始检查之前加载。如果发现这个。 stackoverflow.com/questions/26980962/…
您可以使用例如检查图像是否已经加载naturalWidth 如此处所述Check if an image is loaded (no errors) in JavaScript，如果未加载，请侦听加载事件。

标签： javascript jquery

【解决方案1】：

由于您已将脚本放置在页脚（文档末尾），我最好的猜测是图像在脚本启动之前已经加载。因此，我认为.on("load", function(){ 永远不会被触发，因为加载事件在脚本启动后根本不会发生（它已经发生了）。

我在这里做了一个小演示，因为他们（jsfiddle）也在图像之后加载脚本：this is the fiddle

尝试在图像之前（之前）调用您的函数，看看这是否不能解决您的问题。

【讨论】：