下面希望有你要的答案，我们一起来看看吧!js等待加载效果我们在做wordpress主题开发时，为了实现图片的加载变快，避免不了要使用图像的懒加载技术，这里我推荐使用lazysizes.js，因为lazySizes是轻量级，不需要jQuery库，而且大小只有5kb，使用方法更简单。使用教程使用是十分简单的，并且不需要加入jQuery库。
js等待加载效果?我们在做wordpress主题开发时，为了实现图片的加载变快，避免不了要使用图像的懒加载技术，这里我推荐使用lazysizes.js，因为lazySizes是轻量级，不需要jQuery库，而且大小只有5kb，使用方法更简单，我来为大家科普一下关于js等待加载效果?下面希望有你要的答案，我们一起来看看吧!
js等待加载效果
我们在做wordpress主题开发时，为了实现图片的加载变快，避免不了要使用图像的懒加载技术，这里我推荐使用lazysizes.js，因为lazySizes是轻量级，不需要jQuery库，而且大小只有5kb，使用方法更简单。
图像懒加载我先解释一下什么是图像懒加载
lazyLoader 图像延迟加载：是指当你网站有很多图像时，若一次性加载全部，那么网站会很慢，通过 lazyloader 插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
使用教程使用是十分简单的，并且不需要加入 jQuery 库。
一、安装lazysizes：
npm install lazysizes –save //npm安装bower install lazysizes –save //bower安装或者可以直接下载lazysizes.min.js 脚本并在您的网页中添加，如下：
<script src="lazysizes.min.js" async=""></script>
二、懒加载方式：
lazysizes不需要任何JS配置，只需要在img标签中添加class=”lazyload”就可以了，目前lazysizes支持四种懒加载方式，如下。
1、无响应默认加载：
<img data-src="img.jpg"/>
2、从模糊到清晰的加载：
<img src="vague.jpg" data-src="clear.jpg"/>
3、响应式加载：
<img
data-sizes=”auto”
data-src=”image2.jpg”
data-srcset=”image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w” class=”lazyload” />
4、iframe的方式：
<iframe frameborder=”0″
class=”lazyload”
allowfullscreen=””
data-src=”//”>
</iframe>
