Question

我试图让预装载器屏幕正常工作，但我遇到了障碍。

我的目标：在图片加载完成后让加载动画/ 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

非常感谢任何帮助。

谢谢，全部。

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

在图像加载完成之前触发功能

1 个答案: