Question

我有一个图像，单击按钮即可加载，该按钮仅在页面加载后可用。这样做的目的是在“页面”之间创建无缝的动画，但是，只有一个html文件具有通过单击鼠标单击确定的隐藏和可见元素。页面加载完成后，如果在完成功能之前加载了当前隐藏的图像，则无论如何都要检查按钮的单击。如果不这样做，是否有一种方法可以在单击按钮之前在后台加载该图像，以便在单击按钮时可以显示图像了？

Answer 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>

**-谢谢-**

延迟功能，直到图像加载了jQuery

1 个答案: