Question

您好我试图阻止动画发生，直到从单独的html文档中提取的图像完全加载为止。

据我所知，现在，代码说：加载id为＆＃34;图像＆＃34;然后运行功能。我想我要说的是拉图片的id，等待图片完全加载，然后运行功能。非常感谢帮助。

$('#nav a, .section a').click(function(event) {
event.preventDefault();

$('.project-detail').load(this.href + " #images", function() {
    $('.project-detail').removeClass('no-transition');
    $('.project-detail').addClass('move-left');
    $('#close-tag').addClass('desktop-close-move');
    $('#doit').addClass('close-move');
});

});

Answer 1

将load事件处理程序绑定到您的图像，这些处理程序将在加载图像时执行，从而运行您的动画。

$(your_images).load(function() {
  //run your animations here when images are loaded
});

Answer 2

只有在页面上的其他内容完全加载后才需要运行的代码可以绑定到窗口，如此...

$(window).on("load", function() {
    // after everything has fully loaded, do this
});

来自jQuery文档...

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。 https://api.jquery.com/load-event/

与图片一起使用时加载事件的注意事项

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，它在WebKit中无法正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

图片缓存问题

http://mikefowler.me/2014/04/22/cached-images-load-event/

imagesLoaded - jQuery插件

https://github.com/desandro/imagesloaded

尝试在内容完全加载之前阻止功能

2 个答案: