延迟功能，直到图像加载 jquery答案

【问题标题】：Delay function until image has loaded jquery延迟功能，直到图像加载 jquery
【发布时间】：2019-05-20 14:41:28
【问题描述】：

我有一个在单击按钮时加载的图像，此按钮仅在页面加载后可用。这样做的目的是在“页面”之间创建无缝动画，但是，只有一个 html 文件显示隐藏和可见元素，由单击鼠标单击确定。一旦页面加载完成，当当前隐藏的图像在完成功能之前加载时，无论如何都会检查按钮的点击。如果失败了，有没有办法在单击按钮之前在后台加载此图像，以便在单击按钮时可以显示图像？

【问题讨论】：

$.load api.jquery.com/load
有一个库可以检测图像何时加载。imagesloaded.desandro.com，我写了一篇关于如何使用它的博客codereplace.com/post/2017/6/21/…，可能会有所帮助

标签： jquery css

【解决方案1】：

您可以在此处尝试此代码。

这里的代码使用了回调函数。当按钮单击而不是完成动画后向下滑动时，然后加载图像。

这是延迟加载的科学之一

也许对你有帮助

$("#toggleButton").on('click',function(e){
  $(".mydiv").slideDown(1000,function(e){
    $('.myimg').each(function(e){
      $(this).attr('src', $(this).attr('myimage')).css('background','none');
    })
  });
})

.mydiv {
  display: none;
}
img[myimage] {
  display:block;
  max-width: 100%;
  height: auto;
  width: 400px;
  height: 380px;
  background: #000 url(https://rentbluharbor.com/wp-content/uploads/ajax-loading-gif-4.gif) no-repeat   center center ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggleButton">Click To Animate</button>
<div class="mydiv">
  <img class="myimg" myimage="https://demo.sirv.com/chair.jpg?hue=10" />
</div>

**-- 谢谢-- **

【讨论】：