主题折腾感想——需要头脑灵活忌呆板

2017年11月07日 22:17:58  阅读 122 次

今天打开 boke112导航的博客目录分类页,比如综合资讯类博客目录页,发现图片加载特别慢,刚出现的页面有点错乱,等图片完全加载之后才恢复正常,这样的体验非常不好,所以就想为这些分类页的图片增加一个延迟加载功能。

主题折腾感想——需要头脑灵活忌呆板 随笔日记 第1张

想到什么就做什么,这也是玩独立博客的乐趣之一,所以立马网上找教程,我记得雅兮网曾经分享过一篇关于图片延迟加载的文章,所以立马前往寻找相关教程,果然被我找到《为你的网站部署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 文件就行了。所以以后折腾主题还是要保持头脑清醒,不要沉迷于某一个错误,应该及时跳出这个固化的思维,从另一个角度去思考问题,很有可能会有意想不到的收获。

如果文章对你有帮助,请赞赏支持懿古今发展!

历史上的今天:

本文地址:https://yigujin.cn/1382.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

发表评论


表情

  1. 雅兮网
    雅兮网 【主管】 @回复

    CDN缓存非常不智能,在后台刷新了缓存,前台页面还是要延迟很久,甚至有一次我经过多次刷新,前台正常后,过了半天又访问,发现css还是未更新之前的内容,郁闷!!

    • 懿古今
      懿古今【老板】2017-11-09 13:03  回复

      @雅兮网所以现在也想明白了,以后想要修改,还是直接重命名相关文件会比较好

      • 雅兮网
        雅兮网 【主管】2017-11-09 14:39  回复

        @懿古今有种方法是在后缀上加.css?v=版本号 每次修改就动版本号,不知道效果如何,最近比较忙,没空测试

        • 懿古今
          懿古今【老板】2017-11-10 15:17  回复

          @雅兮网[赞] 这个办法好像也不错,不过CDN上缓存的好像是style.css文件,我们只是在文件后缀加上版本号不知道是否有效

  2. 老鬼
    老鬼 【试用】 @回复

    可以本地用hosts直接指向服务器的ip,我一般调试都是这样调好,然后再改回来就行了,其实不改也行,自己访问没必要走cdn

    • 懿古今
      懿古今【老板】2017-11-09 13:04  回复

      @老鬼单单自己访问正常还不行,这样的缺点就是自己访问正常了就以为是正常的,但是其他用户访问就是不正常的,那样误导性很强

  3. 米扑博客
    米扑博客 【实习】 @回复

    生命,在于折腾,嘿嘿

  4. 热腾网
    热腾网 【经理】 @回复

    我改动网站也是在线,不过我按地区线路另外解析A记录,让我本地区不走CDN,改动好了在去刷新CDN,暂停A记录的解析。

  5. 姜辰
    姜辰 【助理】 @回复

    如果修改了JS或者CSS的文件,最好的是直接修改文件名,比如原来是css20170101.css,然后今天是11月08,文件名就是css20171108.css,这样就可以避免CDN的缓存。= =不信你看我的CSS,明显是我上次修改CSS的时间。

    • 懿古今
      懿古今【老板】2017-11-09 13:06  回复

      @姜辰[威武] 经过这次折腾也让我明白了,你这种办法是最好的,文件名字不一样的,肯定能够及时加载我们所需要的文件了

  6. 橘子书
    橘子书 【经理】 @回复

    我好久没在本地折腾了,现在突然懒得去本地折腾,因为实际使用的版本跟本地测试的版本越来越明显。

    • 懿古今
      懿古今【老板】2017-11-09 13:06  回复

      @橘子书[偷笑] 所以现在想要本地测试,都要先从服务器下载最新版本来,要不然可能真对不上号

  7. Just Free Slides
    Just Free Slides 【实习】 @回复

    lazyload是个很棒的功能,我的也用了。

  8. 小小参谋
    小小参谋 【试用】 @回复

    学习了,不用CDN省了很多事情

  9. 明月学习笔记Blog
    明月学习笔记Blog 【试用】 @回复

    我一直不是很喜欢图片延迟加载的感觉,总有点儿“便秘”的感觉!给人网页卡顿的体验!

    • 懿古今
      懿古今【老板】2017-11-08 08:45  回复

      @明月学习笔记Blog我这个是特殊要求,就是那个博客目录分类页加载的都是图片,不开这个的话,打开的时候总是错乱,等图片全部加载完成后才正常。用了延迟加载之后,直接打开就是正常的,后面的图片慢慢加载中,挺好的

  10. 明月登楼
    明月登楼 【副总】 @回复

    开启了 CDN 或者缓存后我一般都不对JS和CSS做过多的折腾,因为太麻烦了!
    不过,真要折腾的时候也可以手动让 CDN 预热URL来实现快速的更新各个 CDN 节点上的JS缓存!

    • 懿古今
      懿古今【老板】2017-11-08 08:46  回复

      @明月登楼平时使用百度或者阿里云的CDN都是直接刷新相应的URL地址然后就行了,这次云盾不知道是不是次数有限制,前面刷新还好,后面的刷新一点用都没有

      • 明月登楼的博客
        明月登楼的博客 【副总】2017-11-08 09:07  回复

        @懿古今这方面,我感觉云盾是弱了不少!看看未来的改进吧!或者我们整理一下相关的不足,一起反馈给他们!就当是个人博客联合参与评测!哈哈!

  11. 九哥
    九哥 【主管】 @回复

    鸟哥主题自带图片延迟加载,省得折腾了 [挤眼]