在图像完成加载之前触发函数答案

【问题标题】：Function firing before images has finished loading在图像完成加载之前触发函数
【发布时间】：2016-01-29 14:35:42
【问题描述】：

我正在尝试让预加载器屏幕工作，但遇到了障碍。

我的目标：在图像加载完成后让加载动画/div 消失。

我尝试使用一个简单的 .ready 函数来完成此操作，但删除加载动画的函数仍然会触发白色图像仍在加载，并且查看者将实时看到图像加载。

$("#defaultImage").ready(function(){
  TweenMax.to(["#backgroundLoad","#loadBoxes"],1,{alpha:0,delay:0.75});
  console.log('Page has loaded'); 
});

这是不正确的吗？我认为这将等待整个页面（包括图像）加载，然后触发其中的函数。

我也尝试了以下方法，但似乎根本没有触发 console.log

document.getElementById("defaultImage").onload = function (){
  console.log('Page has loaded'); 
};

下面有问题的笔。如果您在调试视图中查看它并进行硬刷新，您可以看到该问题。 http://codepen.io/mhcreative/pen/GoxLPo?editors=0011

任何帮助将不胜感激。

谢谢大家。

【问题讨论】：

您要做的是在加载元素时调用回调，即当元素在浏览器上呈现时，而不是在加载图像时。一种解决方案是您可以使用 imagesLoaded 库而不是编写自己的代码
看起来对我有用。请注意，您的补间函数有 0.75 秒的延迟，因此用户总是必须在加载程序消失和页面上显示图像之间等待很长时间
感谢@Zeeshan Hyder imagesLoaded 库完美运行。 Desandro 在 JS 库质量中是 3 for 3。再次感谢。

标签： javascript image preloader

【解决方案1】：

如果您仍然想要它，请在此处尝试。

$(document).ready(function(){
    var img = new Image();   // Create new img element
    img.addEventListener("load", function() {
     TweenMax.to(["#backgroundLoad","#loadBoxes"],1,{alpha:0,delay:0.75});
    }, false);
    img.src = 'src/to/img'; // Set source path
    $("#defaultImage").append(img); //append loaded image inside div
});

【讨论】：

完美运行。谢谢你，我现在注意到你也建议了 imagesloaded 库。你是 2 对 2。继续努力。非常感谢。
很高兴它有帮助。 :)