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

我试图让一个预加载屏幕工作，但遇到了一个障碍

我的目标是：在图像加载完成后，使加载的动画/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'); 
};

下面有问题的钢笔。如果在“调试”视图中查看问题并进行硬刷新，则可以看到该问题。

任何帮助都将不胜感激

---

谢谢大家。

如果您还想在本地使用它，请尝试一下

$(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 librarylooks，就像它对我有用一样。请注意，tween函数有0.75秒的延迟，因此用户必须在加载程序消失和页面上显示的图像之间等待很长时间感谢@Zeeshan Hyder imagesLoaded库工作正常。Desandro在JS库质量中是3比3。再次感谢你，工作做得很好。谢谢你，我现在注意到你也建议使用imagesloaded库。你是2比2。继续努力。非常感谢。很高兴它有帮助。：）