尝试阻止功能直到内容完全加载答案

【问题标题】：Trying to prevent function until after content is fully loaded尝试阻止功能直到内容完全加载
【发布时间】：2016-08-05 21:48:48
【问题描述】：

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

据我所知，现在，代码是这样说的：加载 id 为“图像”的 div，然后运行函数。我想我想说的是提取图像的 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');
});

});

【问题讨论】：

在 HTML 源被下载并应用后，load 的回调被触发；图像，正如您所体验的那样，之后会被加载。
另外，这将在http://www.example.com/ #images 处加载整个页面，而不是选择#images div。您可以尝试将页面加载到隐藏元素中，然后使用选择器获取 div，然后将其添加到真实页面中
JavaScript Preloading Images

标签： javascript jquery ajax

【解决方案1】：

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

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

【讨论】：

谢谢！直接调用 div 中的“img”就可以了。例如$("#images img")

【解决方案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

【讨论】：