Hexo中添加懒加载动画 loading


引言

影响网页打开速度的原因有许多种,本文主要对文章封面加载进行优化,最后给出几点相关的优化建议。

懒加载

懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式*。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场景中。

为什么要用懒加载

  • 能提升用户的体验,不妨设想下,用户打开像手机淘宝长页面的时候,如果页面上所有的图片都需要加载,由于图片数目较大,等待时间很长,用户难免会心生抱怨,这就严重影响用户体验。
  • 减少无效资源的加载,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。
  • 防止并发加载的资源过多会阻塞js的加载,影响网站的正常使用。

预加载

预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。

为什么要用预加载

在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,直到所有内容加载完毕。

Hexo中添加文章封面懒加载gif

引入js

  • themes\hexo-theme-matery-master\source\js中新建lazysizes.min.js文件,打开这个网址传送门,将内容复制粘贴到lazysizes.min.js即可。

  • 打开文件\layout\_partial\head.ejshead标签里面引入路径

<script src="/source/js/lazysizes.min.js"></script>
  • themes/matery/layout/index.ejs文件内修改两个内容,在post.img下面的src改为data-src,然后旁边写src="/medias/loading.gif",路径就是你放图片的位置。
<div class="card-image">
    <% if (post.img) { %>
    <img data-src="<%- url_for(post.img) %>" src="/medias/loading2.gif"  class="responsive-img lazyload" alt="<%= post.title %>">
    <% } else { %>
    <%
        var featureimg = '/medias/featureimages/0.jpg';
        var featureImages = theme.featureImages;
        if (!featureImages || featureImages.length == 0) {
            return featureimg;
        }
        featureimg = featureImages[Math.abs(hashCode(post.title) % featureImages.length)]
    %>
    <img src="<%- theme.jsDelivr.url %><%- url_for(featureimg) %>" class="responsive-img" alt="<%= post.title %>">
    <% } %>
    <span class="card-title"><%= post.title %></span>
    </div>
  • 最后在themes\hexo-theme-matery-master\source\medias文件中添加一张gif图片。

最总效果:
img

优化建议

  • 使用多线部署,因为国内访问github比较慢,建议博客可以放在国内的站点。
  • 使用cdn,对于字体,js,css等静态资源,如果有cdn加速,建议使用cdn。比如我的博客,用的是jsDeliver。
  • 尽量使用简洁的主题,比如Next等。
  • js脚本尽量后置,如果不影响功能,建议放在之前,并且能异步加载的,尽量异步加载。比如nova主题,许多脚本都是后置并且异步的。

文章作者: kaiboshi
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 kaiboshi !
评论
  目录