今天打开 boke112 导航的博客目录分类页,比如综合资讯类博客目录页,发现图片加载特别慢,刚出现的页面有点错乱,等图片完全加载之后才恢复正常,这样的体验非常不好,所以就想为这些分类页的图片增加一个延迟加载功能。
想到什么就做什么,这也是玩独立博客的乐趣之一,所以立马网上找教程,我记得雅兮网曾经分享过一篇关于图片延迟加载的文章,所以立马前往寻找相关教程,果然被我找到《为你的网站部署 jQuery.lazyload 插件实现图片延迟加载》这篇文章,整篇文章的操作步骤无非就是加载 jquery.lazyload.min.js,修改 img 标签结果和设置 img.lazy 的参数。
看步骤就三个操作,但是我竟然折腾了一个下午都没有搞定,一直在反复调试 JS 文件,因为第三步那个 img.lazy 的参数不知道放在哪里。刚开始是放在主题的某一个 JS 文件中,然后不生效,接着放在到 jquery.lazyload.min.js 文件的最后,结果还是出错。
在经过反复测试中才发现原来都是 CDN 搞的鬼,比如我已经修改了 JS 文件,但是在 CDN 后台刷新这个文件的时候,总是显示“刷新成功”,但是实际上文件还是老文件,这也是导致我总以为 JS 设置不对反复修改 JS 的主要原因。知道是文件缓存问题,然后我的时间就一直花在刷新 JS 文件上,反复刷新,反复用浏览器测试,同时也清除浏览器缓存等等各种手段,但是都无法解决。等到临近下班的时候才想起来会不会是 CDN 的问题,这个时候才想起联系对方客服,把相关情况跟客服一说,果然是对方的缓存刷新问题,等对方帮忙在后台处理后终于成功实现了图片延迟加载功能。
虽然这次折腾主题耗时非常长,但是大部分都是在做无用功,如果是在本地折腾或者没有开 CDN,我想整个功能拿下的时间连十分之一都不用。所以以后折腾主题或某些功能,建议还是在本地折腾会比较好,在本地成功折腾之后,再将相关文件上传覆盖,然后刷新缓存就好。而不是直接在主站上修改,修改一次刷新一次缓存,然后不成功又修改,接着又刷新缓存,这个很容易导致某些文件未能成功刷新,这样一来就会出现耗时费力不讨好的情况。
通过这次折腾主题,感触最大的还是自己的脑筋比较僵化,不懂的变通,既然 CDN 后台刷新文件走不通,在不更换 CDN 的情况下,其实还有一种更好的解决办法,那就是直接重命名这个 JS 文件,让 CDN 加载新的 JS 文件就行了。所以以后折腾主题还是要保持头脑清醒,不要沉迷于某一个错误,应该及时跳出这个固化的思维,从另一个角度去思考问题,很有可能会有意想不到的收获。
发表于2017-11-07 22:40 沙发
鸟哥主题自带图片延迟加载,省得折腾了 [挤眼]
@九哥[威武] 所以说鸟哥那个begin主题是最牛的主题
发表于2017-11-08 08:27 板凳
开启了 CDN 或者缓存后我一般都不对JS和CSS做过多的折腾,因为太麻烦了!
不过,真要折腾的时候也可以手动让 CDN 预热URL来实现快速的更新各个 CDN 节点上的JS缓存!
@明月登楼平时使用百度或者阿里云的CDN都是直接刷新相应的URL地址然后就行了,这次云盾不知道是不是次数有限制,前面刷新还好,后面的刷新一点用都没有
@懿古今这方面,我感觉云盾是弱了不少!看看未来的改进吧!或者我们整理一下相关的不足,一起反馈给他们!就当是个人博客联合参与评测!哈哈!
@明月登楼的博客是的,云盾CDN我就遇到过两次问题了,一次就是上次黑名单问题,这次就是CDN刷新问题
发表于2017-11-08 08:27 地板
我一直不是很喜欢图片延迟加载的感觉,总有点儿“便秘”的感觉!给人网页卡顿的体验!
@明月学习笔记Blog我这个是特殊要求,就是那个博客目录分类页加载的都是图片,不开这个的话,打开的时候总是错乱,等图片全部加载完成后才正常。用了延迟加载之后,直接打开就是正常的,后面的图片慢慢加载中,挺好的
发表于2017-11-08 10:51 4楼
学习了,不用CDN省了很多事情
@小小参谋CDN还是要用的。
发表于2017-11-08 14:18 5楼
lazyload是个很棒的功能,我的也用了。
发表于2017-11-08 14:58 6楼
我好久没在本地折腾了,现在突然懒得去本地折腾,因为实际使用的版本跟本地测试的版本越来越明显。
@橘子书[偷笑] 所以现在想要本地测试,都要先从服务器下载最新版本来,要不然可能真对不上号
发表于2017-11-08 18:51 7楼
如果修改了JS或者CSS的文件,最好的是直接修改文件名,比如原来是css20170101.css,然后今天是11月08,文件名就是css20171108.css,这样就可以避免CDN的缓存。= =不信你看我的CSS,明显是我上次修改CSS的时间。
@姜辰[威武] 经过这次折腾也让我明白了,你这种办法是最好的,文件名字不一样的,肯定能够及时加载我们所需要的文件了
发表于2017-11-08 22:05 8楼
我改动网站也是在线,不过我按地区线路另外解析A记录,让我本地区不走CDN,改动好了在去刷新CDN,暂停A记录的解析。
@热腾网[赞] 这也是一种不错的办法,现在就拍CDN刷新不生效
发表于2017-11-08 23:23 9楼
生命,在于折腾,嘿嘿
发表于2017-11-09 00:36 10楼
可以本地用hosts直接指向服务器的ip,我一般调试都是这样调好,然后再改回来就行了,其实不改也行,自己访问没必要走cdn
@老鬼单单自己访问正常还不行,这样的缺点就是自己访问正常了就以为是正常的,但是其他用户访问就是不正常的,那样误导性很强
发表于2017-11-09 10:02 11楼
CDN缓存非常不智能,在后台刷新了缓存,前台页面还是要延迟很久,甚至有一次我经过多次刷新,前台正常后,过了半天又访问,发现css还是未更新之前的内容,郁闷!!
@雅兮网所以现在也想明白了,以后想要修改,还是直接重命名相关文件会比较好
@懿古今有种方法是在后缀上加.css?v=版本号 每次修改就动版本号,不知道效果如何,最近比较忙,没空测试
@雅兮网[赞] 这个办法好像也不错,不过CDN上缓存的好像是style.css文件,我们只是在文件后缀加上版本号不知道是否有效