我有一个点击按钮加载的图像,这个按钮只有在页面加载后才可用。这样做的目的是在“页面”之间创建无缝动画,但是只有一个HTML文件具有由单击鼠标单击决定的隐藏和可见元素。当当前隐藏的图像在完成该功能之前已加载时,仍然可以在页面加载后检查按钮的一次单击。如果失败,是否有一种方法可以在单击按钮之前在后台加载此图像,以便在单击按钮时可以显示该图像?
您可以在此处尝试此代码。
这里的代码使用回调函数。当按钮点击比完成动画后滑下,然后加载图像。
这是懒惰装载的科学之一
可能对你有帮助
$("#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>
谢谢你。--**
