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

Question

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

我的目标：让加载 animation/divs 在图片加载完成后消失。

我已经尝试使用一个简单的 .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

如有任何帮助，我们将不胜感激。

谢谢大家。

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

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

Function firing before images has finished loading

javascript

image

preloader