[{"data":1,"prerenderedAt":74},["ShallowReactive",2],{"content:\u002Farticles:4176":3},{"item":4,"md":15,"html":16,"menu":17,"excerpt":28,"related":29},{"title":5,"id":6,"time":7,"modifyTime":8,"len":9,"encrypt":10,"showComments":11,"tags":12,"customSlug":14},"适用于静态HTML的一种图片懒加载策略",4176,1640525746928,1640786463701,2387,false,true,[13],"vue","",null,"\u003Ch3 data-marked-line=\"1\">\u003Csup class=\"fake-head\" id=\"%E5%81%9A%E8%BF%87%E5%B0%9D%E8%AF%95\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E5%81%9A%E8%BF%87%E5%B0%9D%E8%AF%95\">做过尝试\u003C\u002Fa>\u003C\u002Fh3>\u003Cp data-marked-line=\"3\">  这个功能完成之前，本博客静态生成的html是无法使用懒加载的，因为懒加载组件是一个\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fnuxt2-blog\u002Fblob\u002Fmaster\u002Fcomps\u002Flazy-img.vue\" target=\"_blank\">vue component\u003C\u002Fa>。关于如何静态生成html，可以参考\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fnuxt2-blog\u002Fblob\u002Fmaster\u002Fpages\u002Farticles\u002Fedit\u002F_id.vue#L129\" target=\"_blank\">edit组件\u003C\u002Fa>。我试过动态编译\u003Ccode>v-html\u003C\u002Fcode>，但是无法避免html字符串里有和vue冲突的东西。\u003C\u002Fp>\n\u003Ch3 data-marked-line=\"5\">\u003Csup class=\"fake-head\" id=\"%E6%94%B9%E5%8F%98%E6%80%9D%E8%B7%AF\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E6%94%B9%E5%8F%98%E6%80%9D%E8%B7%AF\">改变思路\u003C\u002Fa>\u003C\u002Fh3>\u003Cp data-marked-line=\"7\">  直到昨天，我都没有想好如何解决这个问题，一直留了个TODO在那。昨晚躺床上时灵光一现：无法编译整个html，那我只取出想要的部分，然后手动替换成vue实例呢？今早起来，打开电脑准备试试，这是这周最后一次在家里用电脑了\u003Cimg src=\"\u002Fsticker\u002Faru\u002F56.png\" alt=\"sticker\"\u002F>\u003C\u002Fp>\n\u003Col data-marked-line=\"9\">\n\u003Cli>\u003Cp data-marked-line=\"9\">首先就是如何在js里手动实例化一个\u003Ccode>.vue\u003C\u002Fcode>单文件组件，找到了一个\u003Ca href=\"https:\u002F\u002Fvuejs.org\u002Fv2\u002Fapi\u002F#Vue-extend\" target=\"_blank\">方法\u003C\u002Fa>，尝试可行。\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp data-marked-line=\"10\">第二步，在\u003Ccode>v-html\u003C\u002Fcode>渲染后，手动替换图片为懒加载图片组件。只需在\u003Ccode>$nextTick\u003C\u002Fcode>加上：\u003C\u002Fp>\n\u003Cpre data-marked-line=\"12\" data-lang=\"js\" data-shiki>\u003Ccode class=\"language-js\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> LazyImg\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"~\u002Fcomps\u002Flazy-img\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> LazyImgComp\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> Vue\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">extend\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">LazyImg\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\">this\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">$refs\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">markdown\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">querySelectorAll\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'.image-container img'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">el\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">    new\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> LazyImgComp\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">      propsData\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        src\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">el\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">getAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'src'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        alt\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">el\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">title\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        viewer\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">true\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        imgStyle\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">el\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">getAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'style'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        title\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">el\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">title\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    }).\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">$mount\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">el\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">})\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp data-marked-line=\"29\">  对，没错，这一步就行了。但是有一个问题，项目之前懒加载监听的scroll事件，是从layout父级组件provide拿的。因为懒加载很多，若每一个都去\u003Ccode>addEventListener\u003C\u002Fcode>太不优雅；另外scroll还要被其他页面使用，例如文章详情的menu；另外scroll做了节流。所以我把它放到了顶级元素里（这里也是一个骚操作，有兴趣可以扒扒源码\u003Cimg src=\"\u002Fsticker\u002Fyellow-face\u002F50.png\" alt=\"sticker\"\u002F>），这会导致一个问题：手动实例化的\u003Ccode>LazyImgComp\u003C\u002Fcode>，拿不到这个scroll \u003Ccode>inject\u003C\u002Fcode>！现在只有一种办法，把原本就不属于vue管的浏览器事件，脱离出去。\u003C\u002Fp>\n\u003Ch3 data-marked-line=\"31\">\u003Csup class=\"fake-head\" id=\"%E7%9C%9F%E6%AD%A3%E7%9A%84%E9%97%AE%E9%A2%98\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E7%9C%9F%E6%AD%A3%E7%9A%84%E9%97%AE%E9%A2%98\">真正的问题\u003C\u002Fa>\u003C\u002Fh3>\u003Cp data-marked-line=\"33\">  所以现在的问题就是，如何把scroll事件脱离出去，而且要让它为全站所使用。这个问题对我来说有点棘手，之前没这样做过。但是！又一个灵光一现，既然scroll是事件监听，那我为何不直接代理它，然后想怎么转发就怎么转发呢。于是就有了以下操作：\u003C\u002Fp>\n\u003Col data-marked-line=\"35\">\n\u003Cli>删掉之前的scroll烂代码。\u003C\u002Fli>\n\u003Cli>新建一个\u003Ccode>scroll-event.js\u003C\u002Fcode>文件，如下：\u003Cpre data-marked-line=\"37\" data-lang=\"js\" data-shiki>\u003Ccode class=\"language-js\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">inBrowser\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">} \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"~\u002Futils\u002Futils\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> throttle\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"lodash\u002Fthrottle\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">let\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> scrollEvent\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\"> null\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F\u002F 初始化window监听\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> initScrollTrigger\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> () {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">inBrowser\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">    scrollEvent\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> CustomEvent\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'scroll-event'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">    window\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'scroll'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">throttle\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">e\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">      window\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">dispatchEvent\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">scrollEvent\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    }, \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">200\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F\u002F 监听转发的事件\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> addScrollListener\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">callback\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">scrollEvent\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">    window\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'scroll-event'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">callback\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F\u002F 取消监听\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> rmScrollListener\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">callback\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">scrollEvent\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">    window\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'scroll-event'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">callback\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fli>\n\u003Cli>\u003Ccode>initScrollTrigger\u003C\u002Fcode>只需要在layout顶级元素的mount里调用一次。然后\u003Ccode>addScrollListener\u003C\u002Fcode>作为节流过的scroll事件，就可以随便用了。实测可行。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp data-marked-line=\"66\">\u003Cstrong>冬天手冻僵了，人也懒，文章写得太简单，以后空闲想写了再完善吧。。。\u003C\u002Fstrong>\u003C\u002Fp>\n",[18,22,25],{"size":19,"text":20,"url":21},"small","做过尝试","%E5%81%9A%E8%BF%87%E5%B0%9D%E8%AF%95",{"size":19,"text":23,"url":24},"改变思路","%E6%94%B9%E5%8F%98%E6%80%9D%E8%B7%AF",{"size":19,"text":26,"url":27},"真正的问题","%E7%9C%9F%E6%AD%A3%E7%9A%84%E9%97%AE%E9%A2%98","做过尝试 这个功能完成之前，本博客静态生成的html是无法使用懒加载的，因为懒加载组件是一个vue component。关于如何静态生成html，可以参考edit组件。我试过动态编译v-html，但是无法避免html字符串里有和vue冲突的东西。 改变思路 直到昨天，我都没有想好如何解决这个问题，一…",[30,42,49,56,66],{"item":31,"count":41},{"title":32,"len":33,"tags":34,"id":37,"time":38,"modifyTime":39,"showComments":11,"encrypt":10,"customSlug":40},"关于本站的重构 (又双叒叕重构了)",1503,[35,13,36],"前端","杂谈",8500,1741528184917,1759579038298,"about-renovate",1,{"item":43,"count":41},{"title":44,"len":45,"tags":46,"id":47,"time":48,"modifyTime":48,"encrypt":10,"showComments":11,"customSlug":14},"vue3用于管理axios异步请求一致性的功能函数",3227,[13,35],9820,1725014139074,{"item":50,"count":41},{"title":51,"len":52,"tags":53,"id":54,"time":55,"modifyTime":55,"encrypt":10,"showComments":11,"customSlug":14},"Nuxt3创建SSE server以及client的简明教程",1905,[35,13],5449,1720261091923,{"item":57,"count":41},{"title":58,"len":59,"tags":60,"id":63,"time":64,"modifyTime":65,"encrypt":10,"showComments":11,"customSlug":14},"树莓派桌面小屏",1678,[61,13,62],"树莓派","python",8442,1645457432535,1685333435027,{"item":67,"count":41},{"title":68,"len":69,"tags":70,"id":71,"time":72,"modifyTime":73,"encrypt":10,"showComments":11,"customSlug":14},"vite+vue3下如何使用动态导入的svg-sprite",2867,[13],9074,1632102764931,1707966919983,1793351209947]