1:HL["/_next/static/css/275839517c59c532.css",{"as":"style"}]
2:HL["/_next/static/css/bdb880d990e879b6.css",{"as":"style"}]
0:[[["",{"children":["post",{"children":[["slug","hexo-native-lazy-load","d"],{"children":["__PAGE__?{\"slug\":\"hexo-native-lazy-load\"}",{}]}]}]},"$undefined","$undefined",true],"$L3",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/275839517c59c532.css","precedence":"next"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/bdb880d990e879b6.css","precedence":"next"}]],["$L4",null]]]]
5:HL["/_next/static/css/95c7fb627fba8423.css",{"as":"style"}]
6:HL["/_next/static/css/477df780fc5cb593.css",{"as":"style"}]
7:HL["/_next/static/css/c40a92e7f996f910.css",{"as":"style"}]
3:["$L8",null]
4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Hexo-native-lazy-load 插件"}],["$","meta","2",{"name":"description","content":"Hexo-native-lazy-load 插件"}],["$","link","3",{"rel":"manifest","href":"/manifest.json"}],["$","meta","4",{"name":"generator","content":"Hexo.js & Next.js"}],["$","meta","5",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","6",{"property":"og:title","content":"Hexo-native-lazy-load 插件"}],["$","meta","7",{"property":"og:description","content":"Hexo-native-lazy-load 插件"}],["$","meta","8",{"name":"twitter:card","content":"summary"}],["$","meta","9",{"name":"twitter:title","content":"Hexo-native-lazy-load 插件"}],["$","meta","10",{"name":"twitter:description","content":"Hexo-native-lazy-load 插件"}]]
9:I{"id":"7477","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","859:static/chunks/859-ea023633456a13f8.js","355:static/chunks/app/tags/[slug]/page-257dc97429efd72a.js"],"name":"","async":false}
a:I{"id":"92","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"","async":false}
b:I{"id":"2449","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"","async":false}
c:I{"id":"3211","chunks":["272:static/chunks/webpack-7471fa70de6bdb29.js","253:static/chunks/bce60fc1-2413e66000a5dd8f.js","769:static/chunks/769-2bf088c0a421e73d.js"],"name":"","async":false}
d:I{"id":"5767","chunks":["272:static/chunks/webpack-7471fa70de6bdb29.js","253:static/chunks/bce60fc1-2413e66000a5dd8f.js","769:static/chunks/769-2bf088c0a421e73d.js"],"name":"","async":false}
f:I{"id":"6424","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"GaLite","async":false}
10:I{"id":"9869","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"SpeedInsights","async":false}
11:I{"id":"7148","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"Analytics","async":false}
8:["$","html",null,{"lang":"zh-CN","children":[["$","link",null,{"rel":"icon","href":"/images/icons/icon-72x72.png","type":"image/x-icon"}],["$","link",null,{"rel":"preconnect","href":"https://vip2.loli.io"}],["$","link",null,{"rel":"dns-prefetch","href":"https://vip2.loli.io"}],["$","link",null,{"rel":"alternate","type":"application/atom+xml","href":"/atom.xml"}],["$","body",null,{"children":["$","div",null,{"className":"kbCXHY jdraHW eqrBPF kEFtPS bNzOWQ juexza kXMrYr ","children":[["$","header",null,{"className":"doNOqr WhAZY cRUUAa cwMEsi dpJmjl bsTuZj iRietU JCsMI fONtwf eEsPgn gWUoqV kazZiE fsKTUV dkPCxO gdGTeM ","children":[["$","div",null,{"className":"doNOqr WhAZY hrtgtE iYRJzs iJGxaV jlwzhw ","children":[["$","$L9",null,{"className":"icyDkI gSBWlu foGVKH IVbXa kooHYa JxWnH cVJMrm hyoqRt jlijat kUpitc gdtkYW iDPWLw kayxZK hCkclF cneMsd gYPNzh ","href":"/","children":[["$","div",null,{"className":"eSltVp cpOcAb caItCN cyerGB dSxtaa lbEyiT kUPESX Pmecg ldtSOY ","children":["$","$La",null,{"src":"https://vip2.loli.io/2023/03/09/2tAMcy694lE3IZX.jpg","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAW0lEQVR4nAFQAK//AAAAAA0MCD08JoiyXkqWNQBPSDHtwYf/86ehuWNAeS4Aep9O+bt9/9aWxbtzETMSAClqHld9MqambcuqdgMOAwBCaS1Mdzd/hFE4PCMEEAS4ex049PWXOAAAAABJRU5ErkJggg==","alt":"avatar","width":200,"height":200,"layout":"responsive","className":"jWjrEQ eKtERL BRobm iovjFN ","placeholder":"blur","priority":true}]}],["$","h1",null,{"className":"evYdWj cpOcAb XEVlt huiurs ","children":"fengkx's Blog"}]]}],["$","h2",null,{"id":"name","className":"hrtgtE fcXWHl ","children":"fengkx"}],["$","h3",null,{"id":"title","className":"hrtgtE fcXWHl ","children":"Student & Coder"}],["$","div",null,{"className":"fONtwf fcXWHl foGVKH IVbXa dPVLzs fkrGAA cvCecb jJGIjV ","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"d":"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z","children":"$undefined"}],["$","circle","1",{"cx":"12","cy":"10","r":"3","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"gUpJEt ","children":"Guangzhou, China"}]]}],["$","nav",null,{"className":"hrtgtE jlwzhw gSBWlu IVbXa kKRHCo jzaqKj ehqwGF ","children":[["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z","children":"$undefined"}],["$","polyline","1",{"points":"9 22 9 12 15 12 15 22","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"首页"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/archives","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","polyline","0",{"points":"21 8 21 21 3 21 3 8","children":"$undefined"}],["$","rect","1",{"x":"1","y":"3","width":"22","height":"5","children":"$undefined"}],["$","line","2",{"x1":"10","y1":"12","x2":"14","y2":"12","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"归档"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/tags","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z","children":"$undefined"}],["$","line","1",{"x1":"7","y1":"7","x2":"7.01","y2":"7","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"标签"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/links","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2","children":"$undefined"}],["$","circle","1",{"cx":"9","cy":"7","r":"4","children":"$undefined"}],["$","path","2",{"d":"M23 21v-2a4 4 0 0 0-3-3.87","children":"$undefined"}],["$","path","3",{"d":"M16 3.13a4 4 0 0 1 0 7.75","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"友链"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/about","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M18 8h1a4 4 0 0 1 0 8h-1","children":"$undefined"}],["$","path","1",{"d":"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z","children":"$undefined"}],["$","line","2",{"x1":"6","y1":"1","x2":"6","y2":"4","children":"$undefined"}],["$","line","3",{"x1":"10","y1":"1","x2":"10","y2":"4","children":"$undefined"}],["$","line","4",{"x1":"14","y1":"1","x2":"14","y2":"4","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"关于"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/search","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"cpOcAb gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","circle","0",{"cx":"11","cy":"11","r":"8","children":"$undefined"}],["$","line","1",{"x1":"21","y1":"21","x2":"16.65","y2":"16.65","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"jJhMtm fcXWHl ","children":"搜索"}]]}]}],["$","div",null,{"className":"kooHYa evYdWj ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/atom.xml","prefetch":false,"children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"cpOcAb gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M4 11a9 9 0 0 1 9 9","children":"$undefined"}],["$","path","1",{"d":"M4 4a16 16 0 0 1 16 16","children":"$undefined"}],["$","circle","2",{"cx":"5","cy":"19","r":"1","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"jJhMtm fcXWHl ","children":"RSS"}]]}]}]]}]]}],["$","div",null,{"className":"doNOqr hrtgtE fcXWHl iigETV bMSzLf XEVlt jmezSN izetJs kdrTtD bLIxaN ","children":[["$","div",null,{"className":"iLYBKc gSBWlu zEGrF evYWGf hDdCaA ","children":[["$","$L9",null,{"title":"fengkx's GitHub","href":"https://github.com/fengkx","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"d":"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","$L9",null,{"title":"fengkx's Telegram","href":"https://t.me/fengkx","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","line","0",{"x1":"22","y1":"2","x2":"11","y2":"13","children":"$undefined"}],["$","polygon","1",{"points":"22 2 15 22 11 13 2 9 22 2","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","$L9",null,{"href":"https://mstdn.social/@fengkx","rel":"me","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"stroke":"none","d":"M0 0h24v24H0z","fill":"none","children":"$undefined"}],["$","path","1",{"d":"M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944z","children":"$undefined"}],["$","path","2",{"d":"M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","$L9",null,{"title":"RSS feed","href":"/atom.xml","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"d":"M4 11a9 9 0 0 1 9 9","children":"$undefined"}],["$","path","1",{"d":"M4 4a16 16 0 0 1 16 16","children":"$undefined"}],["$","circle","2",{"cx":"5","cy":"19","r":"1","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}]]}],["$","div",null,{"className":"hrtgtE fcXWHl cyerGB kKRHCo ","children":["Build with ",["$","$L9",null,{"title":"Hexo official site","rel":"noopener noreferrer external nofollow","href":"https://hexo.io","children":"Hexo"}]," ","and"," ",["$","$L9",null,{"title":"Next.js official site","href":"https://nextjs.org","rel":"noopener noreferrer external nofollow","children":"Next.js"}]]}]]}]]}],["$","$Lb",null,{"children":["$","$Lc",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$Ld",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$Lc",null,{"parallelRouterKey":"children","segmentPath":["children","post","children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$Ld",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$Lc",null,{"parallelRouterKey":"children","segmentPath":["children","post","children",["slug","hexo-native-lazy-load","d"],"children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$Ld",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$Le",null],"segment":"__PAGE__?{\"slug\":\"hexo-native-lazy-load\"}"},"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/275839517c59c532.css","precedence":"next"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/95c7fb627fba8423.css","precedence":"next"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/css/477df780fc5cb593.css","precedence":"next"}],["$","link","3",{"rel":"stylesheet","href":"/_next/static/css/c40a92e7f996f910.css","precedence":"next"}]]}],"segment":["slug","hexo-native-lazy-load","d"]},"styles":[]}],"segment":"post"},"styles":[]}]}],["$","$Lf",null,{"uaId":"UA-103237573-1"}],["$","$L10",null,{}],["$","$L11",null,{}]]}]}]]}]
13:I{"id":"5307","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"TocTitle","async":false}
e:[false,["$","main",null,{"className":"prose eUUCKp kTeytq jmezSN cjScYX eqrBPF jdraHW cRUUAa DOWJl hgvoZN iZwowi jGHqUK kwISoH AsNjI","children":[["$","h1",null,{"className":"EKhXX ","children":"Hexo-native-lazy-load 插件"}],"$L12"]}],["$","aside",null,{"className":"cwMEsi dpJmjl gWUoqV kazZiE fsKTUV dkPCxO fcXWHl hrtgtE icKiSN eeREmo fZMRmg hRjOno ","children":["$","div",null,{"className":"doNOqr gepZXl  AsideContainer_asideContainer___FNWl","children":["$","div",null,{"className":"bKqOie lkcNSa doNOqr dNtEOi ","children":[["$","div",null,{"className":"hlBtvm ckBWJI XEVlt ","children":"文章目录"}],["$","div",null,{"className":"$undefined","children":["$","ol",null,{"className":"jOeduE ","children":[["$","li",null,{"children":[["$","$L13",null,{"id":"Chrome-原生支持图片-lazy-load","text":"Chrome 原生支持图片 lazy load"}],false]}],["$","li",null,{"children":[["$","$L13",null,{"id":"Hexo-native-lazy-load","text":"Hexo native lazy load"}],["$","ol",null,{"className":"jOeduE  iDuqPI ","children":[["$","li",null,{"children":[["$","$L13",null,{"id":"optional-fallback","text":"optional fallback"}],false]}]]}]]}],["$","li",null,{"children":[["$","$L13",null,{"id":"添加本地图片的宽高属性","text":"添加本地图片的宽高属性"}],false]}],["$","li",null,{"children":[["$","$L13",null,{"id":"最终的效果","text":"最终的效果"}],false]}]]}]}]]}]}]}]]
14:I{"id":"4998","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"ArticleContentClient","async":false}
15:I{"id":"7974","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"H2","async":false}
19:I{"id":"7974","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"H3","async":false}
12:["$","$L14",null,{"permalink":"https://www.fengkx.top/post/hexo-native-lazy-load/","dateString":"2019-12-01","comments":true,"aplayer":false,"showCopyright":true,"children":[["$","$L15","3493",{"id":"Chrome-原生支持图片-lazy-load","children":["Chrome 原生支持图片 lazy load"]}],"\n",["$","p","3495",{"children":["前段时间刷推的时候看到了","$L16","。简单的说就是 Chrome76 开始支持一个 loading 属性。有以下三种取值。"]}],"\n",["$","pre","3503",{"className":"shiki github-light","style":{"backgroundColor":"#fff","color":"#24292e"},"tabindex":"0","children":[["$","code","3502",{"className":"language-text","children":[["$","span","3497",{"className":"line","children":[["$","span","3496",{"children":["auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute."]}]]}],"\n",["$","span","3499",{"className":"line","children":[["$","span","3498",{"children":["lazy: Defer loading of the resource until it reaches a calculated distance from the viewport."]}]]}],"\n",["$","span","3501",{"className":"line","children":[["$","span","3500",{"children":["eager: Load the resource immediately, regardless of where it's located on the page."]}]]}]]}]]}],"\n",["$","p","3504",{"children":["想到可以把它放在博客里面作为一种额外的优化。(本博客已经上了大杀器 service worker 其实大部分时候图片都是从 service worker 下载的)"]}],"\n",["$","p","3506",{"children":["花了点时间写了一个 Hexo 插件","$L17","。"]}],"\n",["$","$L15","3507",{"id":"Hexo-native-lazy-load","children":["Hexo native lazy load"]}],"\n",["$","p","3510",{"children":["这个插件要做的事情就是在 img 标签插入",["$","code","3508",{"children":["loading=lazy"]}],"的属性。它使用了 Hexo 的","$L18"]}],"\n",["$","p","3511",{"children":["第一次写 Hexo 的插件。Hexo 的文档给我的感觉很不清楚（看不懂）。很多时候数据结构都要试。有个点一开始不知道。"]}],"\n",["$","p","3515",{"children":["Hexo 插件的入口文件有全局的",["$","code","3512",{"children":["hexo"]}],"对象，对象下有",["$","code","3513",{"children":["hexo.log"]}],"等价于",["$","code","3514",{"children":["hexo-log"]}],"这个 package 不需要额外引入。"]}],"\n",["$","p","3516",{"children":["经过了一段时间的迭代了，下面说说具体功能"]}],"\n",["$","$L19","3517",{"id":"optional-fallback","children":["optional fallback"]}],"\n",["$","p","3520",{"children":["在",["$","code","3518",{"children":["hexo.config.lazy_load.fallback !== false"]}],"条件成立时，会给额外加上一个使用","$L1a","的 fallback lazy load。像这样"]}],"\n",["$","pre","3594",{"className":"shiki github-light","style":{"backgroundColor":"#fff","color":"#24292e"},"tabindex":"0","children":[["$","code","3593",{"className":"language-js","children":[["$","span","3531",{"className":"line","children":[["$","span","3521",{"style":{"color":"#D73A49"},"children":["if"]}],["$","span","3522",{"style":{"color":"#24292E"},"children":[" ("]}],["$","span","3523",{"style":{"color":"#D73A49"},"children":["!"]}],["$","span","3524",{"style":{"color":"#24292E"},"children":["("]}],["$","span","3525",{"style":{"color":"#032F62"},"children":["\"loading\""]}],["$","span","3526",{"style":{"color":"#D73A49"},"children":[" in"]}],["$","span","3527",{"style":{"color":"#005CC5"},"children":[" HTMLImageElement"]}],["$","span","3528",{"style":{"color":"#24292E"},"children":["."]}],["$","span","3529",{"style":{"color":"#005CC5"},"children":["prototype"]}],["$","span","3530",{"style":{"color":"#24292E"},"children":[")) {"]}]]}],"\n",["$","span","3540",{"className":"line","children":[["$","span","3532",{"style":{"color":"#D73A49"},"children":["  const"]}],["$","span","3533",{"style":{"color":"#005CC5"},"children":[" srp"]}],["$","span","3534",{"style":{"color":"#D73A49"},"children":[" ="]}],["$","span","3535",{"style":{"color":"#24292E"},"children":[" document."]}],["$","span","3536",{"style":{"color":"#6F42C1"},"children":["createElement"]}],["$","span","3537",{"style":{"color":"#24292E"},"children":["("]}],["$","span","3538",{"style":{"color":"#032F62"},"children":["\"script\""]}],["$","span","3539",{"style":{"color":"#24292E"},"children":[");"]}]]}],"\n",["$","span","3545",{"className":"line","children":[["$","span","3541",{"style":{"color":"#24292E"},"children":["  srp.src "]}],["$","span","3542",{"style":{"color":"#D73A49"},"children":["="]}],["$","span","3543",{"style":{"color":"#032F62"},"children":[" \"https://cdn.jsdelivr.net/npm/lazysizes@5.1.1/lazysizes.min.js\""]}],["$","span","3544",{"style":{"color":"#24292E"},"children":[";"]}]]}],"\n",["$","span","3549",{"className":"line","children":[["$","span","3546",{"style":{"color":"#24292E"},"children":["  document.body."]}],["$","span","3547",{"style":{"color":"#6F42C1"},"children":["append"]}],["$","span","3548",{"style":{"color":"#24292E"},"children":["(srp);"]}]]}],"\n",["$","span","3558",{"className":"line","children":[["$","span","3550",{"style":{"color":"#D73A49"},"children":["  const"]}],["$","span","3551",{"style":{"color":"#005CC5"},"children":[" imgs"]}],["$","span","3552",{"style":{"color":"#D73A49"},"children":[" ="]}],["$","span","3553",{"style":{"color":"#24292E"},"children":[" document."]}],["$","span","3554",{"style":{"color":"#6F42C1"},"children":["querySelectorAll"]}],["$","span","3555",{"style":{"color":"#24292E"},"children":["("]}],["$","span","3556",{"style":{"color":"#032F62"},"children":["\"img\""]}],["$","span","3557",{"style":{"color":"#24292E"},"children":[");"]}]]}],"\n",["$","span","3566",{"className":"line","children":[["$","span","3559",{"style":{"color":"#24292E"},"children":["  imgs."]}],["$","span","3560",{"style":{"color":"#6F42C1"},"children":["forEach"]}],["$","span","3561",{"style":{"color":"#24292E"},"children":["(("]}],["$","span","3562",{"style":{"color":"#E36209"},"children":["el"]}],["$","span","3563",{"style":{"color":"#24292E"},"children":[") "]}],["$","span","3564",{"style":{"color":"#D73A49"},"children":["=>"]}],["$","span","3565",{"style":{"color":"#24292E"},"children":[" {"]}]]}],"\n",["$","span","3576",{"className":"line","children":[["$","span","3567",{"style":{"color":"#24292E"},"children":["    el."]}],["$","span","3568",{"style":{"color":"#6F42C1"},"children":["setAttribute"]}],["$","span","3569",{"style":{"color":"#24292E"},"children":["("]}],["$","span","3570",{"style":{"color":"#032F62"},"children":["\"data-src\""]}],["$","span","3571",{"style":{"color":"#24292E"},"children":[", el."]}],["$","span","3572",{"style":{"color":"#6F42C1"},"children":["getAttribute"]}],["$","span","3573",{"style":{"color":"#24292E"},"children":["("]}],["$","span","3574",{"style":{"color":"#032F62"},"children":["\"src\""]}],["$","span","3575",{"style":{"color":"#24292E"},"children":["));"]}]]}],"\n",["$","span","3582",{"className":"line","children":[["$","span","3577",{"style":{"color":"#24292E"},"children":["    el."]}],["$","span","3578",{"style":{"color":"#6F42C1"},"children":["removeAttribute"]}],["$","span","3579",{"style":{"color":"#24292E"},"children":["("]}],["$","span","3580",{"style":{"color":"#032F62"},"children":["\"src\""]}],["$","span","3581",{"style":{"color":"#24292E"},"children":[");"]}]]}],"\n",["$","span","3588",{"className":"line","children":[["$","span","3583",{"style":{"color":"#24292E"},"children":["    el.classList."]}],["$","span","3584",{"style":{"color":"#6F42C1"},"children":["add"]}],["$","span","3585",{"style":{"color":"#24292E"},"children":["("]}],["$","span","3586",{"style":{"color":"#032F62"},"children":["\"lazyload\""]}],["$","span","3587",{"style":{"color":"#24292E"},"children":[");"]}]]}],"\n",["$","span","3590",{"className":"line","children":[["$","span","3589",{"style":{"color":"#24292E"},"children":["  });"]}]]}],"\n",["$","span","3592",{"className":"line","children":[["$","span","3591",{"style":{"color":"#24292E"},"children":["}"]}]]}]]}]]}],"\n",["$","p","3595",{"children":["结合对象检测如果不支持 loading 属性则插入 fallback。"]}],"\n",["$","$L19","3596",{"id":"添加本地图片的宽高属性","children":["添加本地图片的宽高属性"]}],"\n",["$","p","3598",{"children":["lazy load 需要尽量减少页面的 reflow。可以通过设置固定的宽高实现。我自己的博客的图片都是放在",["$","code","3597",{"children":["post_asset_folder"]}],"下面。那么就可以通过本地读取文件的宽高直接添加到 img 元素的属性里。"]}],"\n",["$","p","3601",{"children":["插件提供了",["$","code","3599",{"children":["width_height"]}],"设置项。当",["$","code","3600",{"children":["hexo.config.post_asset_folder === true && hexo.config.lazy_load.width_height !== false"]}],"条件成立时将会就会为本地的图片添加宽高。"]}],"\n",["$","$L19","3602",{"id":"最终的效果","children":["最终的效果"]}],"\n",["$","p","3603",{"children":["支持 loading 属性的浏览器。"]}],"\n",["$","p","3605",{"children":[["$","$La",null,{"className":"m-img","id":"$undefined","alt":"loading-lazy","style":"$undefined","loading":"lazy","src":"https://vip2.loli.io/2023/03/08/c5OxonrmSEpD1Jq.png","width":947,"height":96,"placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAIAAACZnPOkAAAACXBIWXMAABJ0AAASdAHeZh94AAAAGElEQVR4nGOwd3RVUtHQN7Zoauv+9uc/ACH6BlLl0P+OAAAAAElFTkSuQmCC"}]]}],"\n",["$","p","3606",{"children":["不支持 loading 属性的浏览器"]}],"\n",["$","p","3608",{"children":[["$","$La",null,{"className":"m-img","id":"$undefined","alt":"lazysizes","style":"$undefined","loading":"lazy","src":"https://vip2.loli.io/2023/03/08/oN5meA1hnl3c6Ld.png","width":1249,"height":65,"placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAIAAACZnPOkAAAACXBIWXMAABJ0AAASdAHeZh94AAAAGElEQVR4nGNgEDNmMAoKaFi66f7/rJkHACQ7BpbwfnQoAAAAAElFTkSuQmCC"}]]}],"\n",["$","p","3609",{"children":["传送门"]}],"\n",["$","p","3612",{"children":["$L1b"]}],"\n"]}]
16:["$","a",null,{"href":"https://web.dev/native-lazy-loading/","children":["Chrome 开始原生支持 lazy load 的新闻"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
17:["$","a",null,{"href":"https://www.npmjs.com/package/hexo-native-lazy-load","children":["hexo-native-lazy-load"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
18:["$","a",null,{"href":"https://hexo.io/api/filter","children":["filter API"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1a:["$","a",null,{"href":"https://github.com/aFarkas/lazysizes","children":["lazysizes"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1b:["$","a",null,{"href":"https://nodei.co/npm/hexo-native-lazy-load/","children":[["$","$La",null,{"className":"m-img","id":"$undefined","alt":"NPM","style":"$undefined","loading":"lazy","src":"https://nodei.co/npm/hexo-native-lazy-load.png?stars=true","width":349,"height":56,"placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAIAAACZnPOkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGUlEQVR4nGMwZGCYUVr8//fP/1+/LO1oBwA9SwlB83WoiwAAAABJRU5ErkJggg=="}]],"target":"_blank","rel":"noopener noreferrer external nofollow"}]