fastadmincms全站赖加载工具包及方法方式
赖加载（Lazy Loading）和异步加载（Asynchronous Loading）都是前端开发中常用的优化技术，旨在提高网页性能和用户体验。它们各自有不同的应用场景和技术实现。
赖加载（Lazy Loading）
赖加载是一种延迟加载资源的策略，其核心思想是推迟非关键资源的加载，直到它们真正需要被显示或使用时才开始加载。最常见的应用场景是在长页面中延迟加载图片或其他媒体文件。当用户滚动到这些资源的位置时，浏览器才会触发它们的加载过程。这种方式可以显著减少初始页面加载的时间和带宽消耗，从而加快页面的响应速度，并为用户提供更好的体验。
优点：
减少初始加载时间。
降低服务器压力。
提高移动设备上的性能，因为减少了数据传输量。
缺点：
用户可能在滚动时遇到短暂的加载延迟。
对于搜索引擎优化（SEO），如果内容依赖于JavaScript来加载，可能会影响搜索引擎抓取内容的效率。
异步加载（Asynchronous Loading）
异步加载是指资源的加载不会阻塞页面其他部分的渲染或执行。这通常应用于脚本文件的加载，确保脚本文件的下载不会影响页面其他内容的加载。通过设置<script>标签的async或defer属性，可以实现脚本的异步加载。
async：脚本将异步加载，即在脚本下载的同时，页面的解析会继续进行。一旦脚本下载完成，它将立即被执行。多个async脚本的执行顺序是不确定的。
defer：脚本将在文档解析完成后，但在DOMContentLoaded事件触发前执行。所有带有defer属性的脚本将按照它们出现在文档中的顺序执行。
优点：
改进了页面加载性能，因为它允许并行下载资源而不阻塞页面渲染。
特别适合于大型脚本文件，避免了长时间的加载导致页面无响应。
缺点：
使用不当可能会导致脚本执行顺序的问题，特别是在多个脚本之间存在依赖关系时。
对于一些必须在DOM完全加载之前执行的脚本，可能需要额外的处理逻辑。
总结
赖加载和异步加载虽然都能提高网页性能，但它们针对的是不同的资源类型和使用场景。赖加载主要用于延迟加载非即时需要的媒体资源，而异步加载则更多用于脚本文件，以确保它们不会阻碍页面的正常加载流程。在实际项目中，合理结合这两种技术，可以有效地提升网站的性能和用户体验。
第一部分：引入文件包
以下代码放入全站公共部分layout中，母版底部放js的尾部加入以下代码
<!-- S 赖加载 -->
<script type="text/javascript" src="__CDN__/assets/libs/laijiazai/lazyload.min.js?v={$site.version}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
lazyload();
});
</script>
<!-- E 赖加载 -->
注意：不引入下面代码，赖加载不会生效
document.addEventListener('DOMContentLoaded', function() {
lazyload();
});
第二部分：前端模版修改
模版修改样式
<img class="lazyload" data-src='{$comment.user.avatar|cdnurl|htmlentities}'/></a>
或者
<img class="tax lazyload" data-src='{$comment.user.avatar|cdnurl|htmlentities}'/></a>
或者
<img class="zwt lazyload" src='占位图'data-src='{$comment.user.avatar|cdnurl|htmlentities}'/></a>
说明：前端模版
在所有<img里加class="lazyload"，如果img里有class了，把lazyload加入class里，不要忘记加空格
<img标签，图片链接src修改为data-src
发表评论 取消回复