hexo next主题深度优化(二),懒加载。
文章目录
个人博客:https://mmmmmm.me
源码:https://github.com/dataiyangu/dataiyangu.github.io
tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面)
废话
本来想全部优化完,一起写博客的,大半夜的也不想太累,可是可能因为年纪大了吧(23了),怕隔天给忘记了,到时候回头找错误岂不是浪费更多的时间,索性,今天拖着疲惫的大脑,写下这篇博文吧~
背景
本人的博客mmmmmm.me (目前可能还是问题很多的,不介意的可以稍微看一下) pjax基本优化完了,目前我涉及到的,现在想优化一下网站的加载速度,因为我的网站刚进去的时候白屏大半天,然后浏览器的转盘转半天,(就是刷新那个标识了,不会表达),之后就是一堆查看通过浏览器的审查模式看network,发现首页的大图片占了很久的响应时间,之后发现我的hexo后台管理工具,hexo-admin(一个很方便的博客发布工具,有兴趣的看我另一篇博客,网上一搜一大堆),每次直接复制粘贴进去,它默认保存的是png格式的,关于jpg和png的区别,希望大家也了解一下,使得我的图片好几兆,我就手动复制成jpg格式的,但是还是不行的呀,这个时候,就上网查各种优化,发现,有个懒加载这个东东,客观往下看。
懒加载简单介绍
何为懒加载,简言之就是在html加载的时候,若果img标签的src是有内容的,在加载的过程中,img标签就回去请求这个图片,知道加载完,我们的浏览器的刷新那个图标才会停止转动,也就是才算请求玩,这个时候懒加载就应运而生。懒加载能够在你鼠标不懂得时候只加载目前电脑窗口内需要展示的图片,电脑屏幕内部需要展示的图片就暂时不加载,对于图片比较多的网站是不是很实用呢?
关于懒加载的语法简单介绍一下:
引入js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
重点!敲黑板了!!!
修改图片属性(增加data-original属性,去掉src属性)
<img alt="" width="640" height="480" data-original="img/example.jpg" />
完善懒加载函数
<script>
$(function() {
$("img").lazyload();
});
<script>
懒加载函数可配置的参数
备注:这里必须设置图片的width和height,否则插件可能无法正常工作。
上面是最简单的调用,但是一般而言,我们还有一些特殊的需求,比如想要提前一点点加载,避免网络过慢时加载缓慢,加载隐藏图片等等,lazyload都为我们提供相应的参数。
1.设置临界点
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 如:设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
$("img").lazyload({
threshold : 200
});
2.使用特效
默认情况下,图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)
$("img").lazyload({
effect : "fadeIn"
});
3.当图片不连续时
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
$("img").lazyload({
failure_limit : 20
});
将 failurelimit 设为 20 ,当插件找到 20 个不在可见区域的图片时停止搜索.
4.加载隐藏图片
当界面有很多隐藏图片的时候并希望加载他们的时候则使用kip_invisible 属性,将其设置为false
$("img").lazyload({
skip_invisible : false
});
到这里,上面的方法已经基本满足常规的懒加载使用了,还有特殊的使用,可查看官网API。
正式在hexo next中加入懒加载
之前尝试过很多方法:
1:
如上查看相关的懒加载api文档,自定义懒加载函数,但是忽略了,img中需要data-original,并且去掉src属性,之后发现然后弥补,想要通过js的方式动态的给我的img加入这个属性,然后去掉src属性,但是js加入的前提是加载完dom模型,加载完dom模型的前提是src中的内容已经加载了,所以是不行的,故尝试修改html,next主题中没有html事swig文件,img中的内容是通过js渲染出来的。故放弃。
2:
上谷歌查看,发现可以:
npm install hexo-lazyload --save
然后修改_config.yml文件
lazyload:
enable: true
# className: #可选 e.g. .J-lazyload-img
# loadingImg: #可选 eg. ./images/loading.png
可是我发现貌似是不行的,反正报各种错,网上好像是有人成功的。这个方法待定,附上原博客地址,感兴趣的可以研究。
http://www.zhaojun.im/hexo-lazyload/
3:按我的步骤来,不要问为什么。
我自己成功的方法:
在主题文件夹下的scripts文件夹里,写一个 js 文件,名字不限,xxxx.js,比如wohaoshuai.js
use strict';
var cheerio = require('cheerio');
function lazyloadImg(source) {
var LZ= cheerio.load(source, {
decodeEntities: false
});
//遍历所有 img 标签,添加data-original属性
LZ('img').each(function(index, element) {
var oldsrc = LZ(element).attr('src');
if (oldsrc) {
LZ(element).removeAttr('src');
LZ(element).attr({
'data-original': oldsrc
});
}
});
return LZ.html();
}
//在渲染之前,更改 img 标签
hexo.extend.filter.register('after_render:html', lazyloadImg);
然后网上是说在header或者footer中引入js
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
//也可替换其他的lazyload源
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function() {
//对所有 img 标签进行懒加载
$("img").lazyload({
//设置占位图,我这里选用了一个 loading 的加载动画
placeholder:"/img/loading.gif",
//加载效果
effect:"fadeIn"
});
});
</script>
但是我发现hexo next主题中有个themes/next/source/js/src/utils.js文件。
找到这个方法:
lazyLoadPostsImages: function () {
// $('#posts').find('img').lazyload({
// placeholder: '/images/loading.gif',
// effect: 'fadeIn',
// threshold : 0
// });
$('img').lazyload({
placeholder: '/images/loading.gif',
effect: 'fadeIn',
threshold : 100,
failure_limit : 20,
skip_invisible : false
});
},
修改内容即可,之前是注释掉的内容,意思是只对article中的内容进行懒加载,可是我需要的是全局的都懒加载,因为上面的scripts中的js已经将全局的img都替换了标签内容,不全局懒加载的话会有的不显示,
然后就是这两个配置:
threshold : 100,
ailure_limit : 20,
意思上面有关懒加载的说的很清楚了,为了解决有的图片可能会不显示。
hexo next主题深度优化(二),懒加载。的更多相关文章
- hexo next主题深度优化(一),加入pjax功能。
文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...
- hexo next主题深度优化(十),博文加密,不需要插件,极简模式,相对安全,融合pjax。
文章目录 效果: 代码: 注意: 背景: 思路: https://www.jianshu.com/p/90c0a15c6f36 http://zhailiange.com/2017/07/06/hex ...
- hexo next主题深度优化(十一),next主题中加入scrollReveal.js,让文章随着鼠标的滚动,出现点小动作。
文章目录 效果 scrollReveal简单介绍以及简单操作 参考文档: next主题中加入scrollReveal 给article标签添加属性 给底部的不蒜子添加属性 本地引入依赖并且编写启动函数 ...
- hexo next主题深度优化(三),引入require.js,适配pjax。
文章目录 require.js的好处, hexo next中加入require.js 新建一个main.js作为所有js的入口 pjax的require.js实现 关于require js适配过程中报 ...
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- SPA应用性能优化(懒加载)
前提: 如今开发方式都是采用前后台分离的方式,前台采用的方式则是单页面应用开发简称SPA,这种开发模式最大的一个特点就是将有所代码打包成了一个文件, 这会导致了一个问题就是如果这个应用过大,打出来的这 ...
- Hibernate 性能优化之懒加载
针对数据库中的大数据,不希望特别早的加载到内存中,当用到它的时候才加载 懒加载分为:类的懒加载.集合的懒加载.单端关联的懒加载 类的懒加载 1.在默认情况下,类就是执行懒加载 2. ...
- hexo next主题深度优化(五),评论系统换成gittalk
文章目录 背景: 开始: 新建comments_git.js 找到comments.swig在最后一个endif之前 引入代码 pjax加入gitalk 遇到的问题 所有的页面共享的一个评论issue ...
- hexo next主题深度优化(七),cdn加速。
文章目录 注: 正题: 免费cdn 收费cdn 个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io ...
随机推荐
- Comet OJ - Contest #11 E ffort(组合计数+多项式快速幂)
传送门. 题解: 考虑若最后的总伤害数是s,那么就挡板分配一下,方案数是\(C_{s-1}^{n-1}\). 那么问题在于总伤害数很大,不能一个一个的算. \(C_{s-1}^{n-1}\)的OGF是 ...
- CSS:CSS 尺寸 (Dimension)
ylbtech-CSS:CSS 尺寸 (Dimension) 1.返回顶部 1. CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允 ...
- c#网络通信框架networkcomms内核解析之一 消息传送2
networkcomms.net 来自英国的网络通信框架 官方网址 www.networkcomms.net 中文网址www.networkcomms.cn 在网络通信程序中,本地的类或者对象,要传输 ...
- font的基本知识
字体 你无法预料到用户是否可以访问样式表里定义的字体.所以在设置字体时,在属性后指定一个替代的字体列表是个不错的主意. 在这个字体列表的最后加上系统字体中的一个,如:serif,sans-serif, ...
- Rop攻击
参考:http://en.wikipedia.org/wiki/Return-oriented_programming Rop全称Return-Oriented Programming,就是对栈上的返 ...
- 【二叉树】二叉树常用算法的C++实现
常见算法有: 1.求二叉树的最大深度 2.求二叉树的最小深度 3.二叉树的层次遍历 4.二叉树的前序遍历 5.二叉树的中序遍历 6.二叉树的后序遍历 7.求二叉树的节点个数 8.求二叉树的叶节点个数 ...
- maven surefire入门
一.maven常用命令: mvn compile mvn install mvn test mvn clean mvn dependency:resolve -X #查看完整的debug信息!!! ...
- 【二】Jmeter接口自动化测试系列之函数使用及扩展
上一篇文章我们了解了Jmeter的参数化的集中方法,虽然方法不是很多,但已经足够使用! 本篇文章,介绍一下Jmeter自带函数的使用和 函数扩展,来满足测试工作中的各种需求! Jmeter自带函数 点 ...
- 高级Java必看的10本书
1.深入理解Java虚拟机:JVM高级特性与最佳实践 本书共分为五大部分,围绕内存管理.执行子系统.程序编译与优化.高效并发等核心主题对JVM进行了全面而深入的分析,深刻揭示了JVM的工作原理. 2. ...
- null == null 或者 [] == [] 或者{} == {} 或者alert(1|| 2) 或者alert(1&& 2) 结果及原理
相信面试的小伙伴们都会遇到此头大的问题,是不是很想骂一句面试官:你白痴啊,鬼都用不着的东西拿来问,你还别说,这些看似用不着的东西却包含着最基础的原理,那我们来理一理. 1.alert(1||2)和 a ...