Question

首先我看了onLoad事件，但是当我读到它时，我发现我已经或将要被弃用，所以我搜索并发现此信息使用on检查图片是否已加载的事件：load() method deprecated?

但是我将触发的简单动画将无效。元素不可见。如果我重新加载浏览器，它可以工作。动画完美无缺，直到我添加了加载事件。可能有什么问题，如何改进代码以更好地工作？

    $("#intro-img").on("load", function() {

    $(".intro-content").animate({
    left: '20px',
    opacity: '1.0'
    });

});

编辑：在我使用window而不是id后，脚本现在正在运行。像这样$(window).on("load", function() {....现在，当页面上的所有内容都已加载时，脚本应该运行？但我想从来没有保证它会100％与图像一起工作！？

Answer 1

$('#book').on("load",function(){
  //animate
});

这种方法的问题是当从缓存加载图像时，事件有可能永远不会被触发。当第一次下载图像时，jquery可以在图像加载和工作预期之前附加事件。但是如果图像通过缓存加载如此快，然后jquery可能没有。

$('#book').on("load",function(){
  $(".intro-content").animate({
    left: '20px',
    opacity: '0.5',
    height:"300px"
    });
}).each(function(){
  if(this.complete) {
    $(this).trigger('load');
  }
});

此代码附加事件并检查图像是否已加载并触发加载事件。

Answer 2

使用$（window）.load，你必须等待加载web中的所有资源才能执行脚本。您可以跨浏览器创建图像加载事件。见：

JavaScript/jQuery event listener on image load for all browsers

而不是你的代码

 $('image').on('load')

您可以使用

 $('image').load()

或使用eventListener附加事件。

祝你好运

Answer 3

您是否尝试过使用备用JQuery函数$(document).ready()？

  $( document ).ready(function() {
     $(".intro-content").animate({
         left: '20px',
         opacity: '1.0'
     });
  });

jQuery on load事件不会触发脚本

3 个答案: