The example in this article describes the jQuery code to implement image preloading effects. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:
The specific code is as follows:
html code:
<div class="main">
<br>
<div class="title">图片预加载</div>
<div class="content">
<div class="img">
<a href="">
<img lazyloadsrc="images/1.jpg" alt="" width="200" height="120">
</a>
<span class="loading"></span>
</div>
<div class="img">
<a href="">
<img lazyloadsrc="images/2.jpg" alt="" width="200" height="120">
</a>
<span class="loading"></span>
</div>
<div class="img">
<a href="">
<img lazyloadsrc="images/3.jpg" alt="" width="200" height="120">
</a>
<span class="loading"></span>
</div>
<div class="img">
<a href="">
<img lazyloadsrc="images/4.jpg" alt="" width="200" height="120">
</a>
<span class="loading"></span>
</div>
<div class="img">
<a href="">
<img lazyloadsrc="images/5.jpg" alt="" width="200" height="120">
</a>
<span class="loading"></span>
</div>
<div class="img">
<a href="">
<img lazyloadsrc="images/6.jpg" alt="" width="200" height="120">
</a>
<span class="loading"></span>
</div>
</div>
</div>js code:
$(function () {
$("[lazyLoadSrc]").YdxLazyLoad({
onShow: function () {
$(this).parent().next().hide()
}
});
});You will see this effect when loading images. Now you know the implementation process. I hope you like the jQuery image preloading effect shared by the editor.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
