html占位符懒加载,lazyload懒加载和swiper轮播懒加载的用法
时间: 2023-07-05 08:04:16 浏览: 67
1. HTML占位符懒加载:使用占位符图片来代替真实图片,等到用户滚动到该图片位置时,再用 JavaScript 替换占位符图片为真实图片。
示例代码:
```html
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload" />
```
```javascript
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll(".lazyload");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazyload');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
```
2. Lazyload懒加载:使用第三方库 lazyload.js 实现图片懒加载。
示例代码:
```html
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload" />
```
```javascript
<script src="lazyload.min.js"></script>
<script>
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazyload"
});
</script>
```
3. Swiper轮播懒加载:使用 Swiper 轮播库的 lazyload 参数实现图片懒加载。
示例代码:
```html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img data-src="real-image1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<img data-src="real-image2.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<img data-src="real-image3.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
```
```javascript
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
pagination: {
el: '.swiper-pagination',
},
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)