懒加载是什么？
懒加载(Load On Demand)
是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。
（摘自百度百科）
可以看出，懒加载节省了系统响应时间，提升了系统性能，非常具有利用价值，适合用来优化我们的博客，特别是将要显示的数据非常多的时候。
Lazysizes.js
lazysize是一个快速（无卡顿），SEO友好和自我初始化的lazyloader，用于图像（包括响应式图像/），iframe，脚本/小部件等等。它还通过区分关键的视图和近视图元素来优先考虑资源，以使感知性能更快。
它也可能成为您集成响应式图像的首选工具。它可以自动计算响应式图像的属性，它允许您与CSS共享属性的媒体查询，帮助将布局（CSS）与内容/结构（HTML）分开，并使响应式图像集成到任何环境中变得非常简单。它还包括一组可选插件，以进一步扩展其功能。
网上有很多篇文章写的都是关于在自己的网站上实现懒加载，唯独没有在博客园博客上实现懒加载的。借此机会，我也向大家分享一下我是怎么在自己的博客上实现懒加载的。
开始
如果你的目的是优化博客，引用文件时一定要采用其min版本并异步加载，且图片转为.webp格式（别谈avif...）。
前几天我在浏览博客园的前端源代码时，在blog-common.min.js里面发现了这几句：
点击查看代码
function loadScript(url, callback) {
if (document.getElementById(url)) {
callback();
return
}
var script = document.createElement("script");
script.id = url;
script.type = "text/javascript";
script.readyState ? script.onreadystatechange = function() {
(script.readyState == "loaded" || script.readyState == "complete") && (script.onreadystatechange = null, callback())
} : script.onload = function() {
callback()
};
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script)
}
一眼异步，直接调用。
步骤
- 前往你的博客园的博客后台管理 -> 设置 -> 侧边栏公告
（其实不管是侧边栏还是页首页尾都可以...）加上下述代码：
点击查看代码
<script defer>
loadScript("https://cdn.bootcdn.net/ajax/libs/lazysizes/5.3.2/lazysizes.min.js",function(){console.log("lazysizes loaded")})
</script>
- 把文章中每一张图片的src改成data-src，再加上class="lazyload"。类似这样：
点击查看代码
<img class="lazyload" data-src="https://count.getloli.com/get/@meny?theme=asoul" alt="Moe Counter!" width="315" height="100"/>
- 做完上述操作后，重新加载时你看到了图片，则说明成功了。
演示
网易《我的世界》中国版换服(渠道服转官服)教程 - meny - 博客园 (cnblogs.com)
标签：function,Lazysizes,script,lazysizes,博客,js,加载 From： https://www.cnblogs.com/meny233/p/17034091.html