{"id":556561,"date":"2022-03-22T06:15:34","date_gmt":"2022-03-21T22:15:34","guid":{"rendered":"http:\/\/4563.org\/?p=556561"},"modified":"2022-03-22T06:15:34","modified_gmt":"2022-03-21T22:15:34","slug":"%e5%9b%be%e7%89%87%e6%b8%90%e8%bf%9b%e5%bc%8f%e5%8a%a0%e8%bd%bdprogressive%e7%9a%84%e4%b8%80%e6%ac%a1%e6%b5%85%e5%b0%9d%e8%be%84%e6%ad%a2%e7%9a%84%e6%8e%a2%e7%b4%a2","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=556561","title":{"rendered":"\u56fe\u7247\u6e10\u8fdb\u5f0f\u52a0\u8f7d(progressive)\u7684\u4e00\u6b21\u6d45\u5c1d\u8f84\u6b62\u7684\u63a2\u7d22"},"content":{"rendered":"
\n
\n
\n

\u56fe\u7247\u6e10\u8fdb\u5f0f\u52a0\u8f7d(progressive)\u7684\u4e00\u6b21\u6d45\u5c1d\u8f84\u6b62\u7684\u63a2\u7d22 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : devwolf <\/span> <\/i> 24<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\u4ee5\u4e0b\u4ec5\u6211\u76f2\u4eba\u6478\u8c61\u5f0f\u7684\u603b\u7ed3\uff0c\u4e3b\u8981\u662f\u5e0c\u671b v \u4f6c\u4eec\u5b9e\u65f6\u6307\u51fa\u4fee\u6b63\u3002
\u6ca1\u6709\u6d89\u53ca\u5230\u5e95\u5c42\u4ee3\u7801\u7684\u63a2\u7d22\uff0c\u4e3b\u7ba1\u63d0\u5230\u4e0d\u7528\u6211\u4eec\u91cd\u590d\u9020\u8f6e\u5b50\uff0c\u6ca1\u53bb\u4ed4\u7ec6\u7814\u7a76\uff0c\u4f46\u5149\u662f\u201c\u9664\u53bb\u5e95\u5c42\u5916\u5982\u4f55\u5b9e\u73b0\u201d\u8fd9\u70b9\u6982\u5ff5\u5c31\u6298\u78e8\u4e86\u597d\u4e00\u4f1a\u513f\uff08\u4e00\u5929\u534a\uff09\u3002
\u9996\u5148\uff0c\u6211\u521a\u63a5\u5230\u4ea7\u54c1\u63d0\u5230\u7684\u8fd9\u4e2a\u9700\u6c42\u65f6\uff0c\u81ea\u5df1\u7684\u8111\u56de\u8def\u662f\u2014\u2014\u6211\u5e94\u8be5\u53bb\u641c\u7d22\u201c\u56fe\u7247\u61d2\u52a0\u8f7d\u3001\u56fe\u7247\u6a21\u7cca\u52a0\u8f7d\u201d\u8fd9\u4e9b\u5173\u952e\u5b57\uff0c\u4f46\u662f(\u767e\u5ea6)\u5f88\u6b6a\uff0c\u8fd9\u4e9b\u5173\u952e\u5b57\u7684\u7ed3\u679c\u6ca1\u6709\u7ed9\u6211\u63d0\u4f9b\u592a\u591a\u6211\u80fd\u7528\u7684\u4fe1\u606f\u3002
\u4e00\u5219\u201cmedium.com \u662f\u5982\u4f55\u8ba9\u56fe\u7247\u52a0\u8f7d\u65f6\u4ece\u6a21\u7cca\u5230\u6e05\u6670\u7684\uff1f\u201d\u7684\u77e5\u4e4e\u5438\u5f15\u5230\u4e86\u6211\u6ce8\u610f\u529b\uff0chttps:\/\/www.zhihu.com\/question\/40757342
\u5176\u4e2d\uff0c\u201c\u4e0d\u9700\u8981\u52a0\u8f7d\u53cc\u56fe\u7247\u201d\u7684\u90a3\u63d0\u5230\u4e86\u201c\u9012\u589e\u5f0f\u7f16\u7801\uff08 Progressive Encoding \uff09\u201d\u8fd9\u4e2a\u6982\u5ff5\u3002
\u6211\u4e4b\u6240\u4ee5\u5173\u6ce8\u8fd9\uff0c\u56e0\u4e3a\u5468\u4e94\u7684\u65f6\u5019\u8be2\u95ee\u4e86\u540e\u7aef\uff0c”\u5f53\u65f6\u7684\u8be2\u95ee”\u6ca1\u95ee\u5230\u56fe\u7247\u5904\u7406\u53c2\u6570\uff0c\u5bfc\u81f4\u6211\u4e00\u5ea6\u653e\u5f03\u4e86\u627e\u540e\u53f0\u63d0\u4f9b\u4e00\u4efd\u6a21\u7cca\u7248\u7684\u56fe\u7247\u3002
Progressive \u8fd9\u4e2a\u8bcd\uff0c\u8ba9\u6211\u5728 github \u4e0a\u6536\u8d27\u9887\u4e30\u3002\u56e0\u4e3a\u9879\u76ee\u9700\u8981 d.ts \uff0c\u6700\u7ec8\u9009\u62e9\u4e86 react-progressive-image-loading \u8fd9\u4e2a\u63d2\u4ef6\u3002\u4e5f\u56e0\u4e3a\u7b2c\u4e00\u773c\u6211\u80fd\u627e\u5230 transitionTime \u8fd9\u6837\u7684\u53c2\u6570\uff0c\u4ee5\u53ca\u7ed9 img \u6dfb\u52a0\u5176\u4ed6\u5c5e\u6027\u7684\u5165\u53e3\u3002
https:\/\/github.com\/wcandillon\/react-progressive-image-loading
\u201c\u7f3a\u70b9\u201d\u561b\uff0c\u4e24\u8fb9\u4f1a\u6709\u767d\u8272\u5149\u8fb9\uff0c\u8fd9\u4e2a\u662f\u627e\u4ea7\u54c1\u59a5\u534f\u4e86\u3002
\u4f46\u662f\uff0c
\u4f46\u662f\u8fd9\u4e2a\u7ec4\u4ef6\u5e76\u4e0d\u80fd\u7ed9\u6211\u63d0\u4f9b\u53e6\u4e00\u4efd\u6a21\u7cca\u7248\u7684\u56fe\u3002
\u6211\u9694\u79bb\u5f52\u6765\u7684\u4e00\u4f4d\u540c\u4e8b\u7ed9\u6211\u63d0\u4f9b\u4e86\u601d\u8def\uff0c\u4ed6\u4ee5\u524d\u5199\u56fe\u7247\u7ec4\u4ef6\u7684\u65f6\u5019\u6709\u542c\u4e3b\u7ba1\u4ecb\u7ecd\u8fc7\uff0c\u524d\u7aef\u53ef\u4ee5\u901a\u8fc7
src={`${item.url}?op=thumb\/fit\/w\/323\/h\/181`}\u8fd9\u6837\u7684\u53c2\u6570\u62ff\u5230\u6307\u5b9a\u5c3a\u5bf8\u7684\u56fe\u7247\u3002
\u4e0e antd4.x \u5b98\u65b9 Image \u91cc\u4e00\u4f8b\u7528\u963f\u91cc\u4e91 oss \u7684\u4e0d\u8c0b\u800c\u5408\uff0c\u90a3\u4f8b url \u7684”serach”\u53c2\u6570\u957f\u8fd9\u6837
?x-oss-process=image\/blur,r_50,s_50\/quality,q_1\/resize,m_mfit,h_200,w_200
\u5728\u6211\u7422\u78e8”\u6e10\u8fdb\u52a0\u8f7d”\u7684\u671f\u95f4\uff0c\u4ed6\u53c8\u8bd5\u9519\u51fa\u4e86 q \u8fd9\u4e2a quality \u53c2\u6570\uff0c\u867d\u7136\u6ca1\u7528\u4e0a:(
\u6700\u7ec8\uff0c\u6211\u628a\u5904\u7406\u53c2\u6570\u91cc\u7684\u5bbd\u9ad8\u90fd\u9664\u4ee5\u4e86\u4e8c\u5341\u56db\uff0c\u7136\u540e\u7528 css \u6269\u56de\u6b63\u5e38\u5927\u5c0f\uff0c\u8fd9\u6837\u5c31\u62ff\u5230\u4e86\u6a21\u7cca\u56fe\u7247\u3002
“`
<ProgressiveImage
transitionTime={1800}
preview={`${xxx.cover_url}?op=thumb\/fit\/w\/${xxx\/24}\/h\/${xxx\/24}`}
src={`${xxx.cover_url}?op=thumb\/fit\/w\/${xxx}\/h\/${xxx)}`}
render={(src, style) => <img
src={src}
className={styles[“vso-waterfall-cover”]}
alt={item.case_title}
style={Object.assign(style, {
width: xxx,
height: xxx
})} \/>}
\/>
“`
\u6700\u540e\uff0c\u597d\u5947\u548c\u5b58\u7591\u7684\u70b9\u8fd8\u5728\u90a3\u4e2a\u201c\u56fe\u7247\u5904\u7406\u53c2\u6570\u201d\u4e0a\uff0c\u4f3c\u4e4e\u662f\u5bf9\u8c61\u5b58\u50a8\u3001cdn \u63d0\u4f9b\u7684\uff0c\u63a5\u624b\u7684\u540e\u7aef\u4e5f\u4e0d\u6e05\u695a\u53ef\u4ee5\u8fd9\u4e48\u4f7f\u7528\u3002
\u8fd9\u6b21\u80fd\u5373\u65f6\u89e3\u51b3\u8fd9\u4e2a\u9700\u6c42\uff0c\u611f\u89c9\u8fd0\u6c14\u5360\u4e86\u5f88\u5927\u6bd4\u4f8b orz
\u4e0a\u5468\u5728\u201c\u80fd\u4e0d\u80fd\u53ea\u9760\u524d\u7aef\u5b9e\u73b0\u201d\u8fd9\u4e2a\u73af\u8282\u8c03\u7814\u4e86\u597d\u4e45\uff0c
\u7ed3\u679c\u4e0a\u800c\u8a00\u786e\u5b9e\u4e0d\u7528\u540e\u7aef\u540c\u4e8b\u534f\u52a9\u2026\u2026\u90a3\u4e2a\u56fe\u7247\u5904\u7406\u4f3c\u4e4e\u662f\u522b\u5904\u63d0\u4f9b\u7684 <\/div>\n
\u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (12<\/span>) <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : murmur <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u90a3\u79cd\u6240\u8c13\u6e10\u8fdb\u5f0f\u52a0\u8f7d\u597d\u50cf\u662f png \u7684\u683c\u5f0f\u51b3\u5b9a\u7684\uff0c\u6709\u4e24\u79cd\uff0c\u4e00\u79cd\u662f\u4ece\u5b8c\u6574\u5230\u4e0d\u5b8c\u6574\uff0c\u4e00\u79cd\u662f\u4ece\u7cca\u5230\u6e05\u6670
    \u5982\u679c\u662f\u52a0\u8f7d 2 \u4e2a\u56fe\uff0c\u6211\u8ba4\u4e3a\u662f\u6d6a\u8d39\uff0c\u53cd\u6b63\u6700\u540e\u90fd\u8981\u52a0\u8f7d\u56fe\u7247\uff0c\u8981\u4e48\u61d2\u52a0\u8f7d\uff0c\u8981\u4e48\u9aa8\u67b6\u5360\u4f4d\uff0c\u4f55\u5fc5\u8fd8\u5f04\u4e0d\u6e05\u6670\u7684\u56fe\u7247 <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : devwolf <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    @murmur \u4ea7\u54c1\u90a3\u8fb9\u60f3\u8981\u81ea\u5bb6\u843d\u5730\u9875\u8fd8\u539f\u51fa https:\/\/unsplash.com\/
    \u8fd9\u6837\u7684\u6548\u679c\uff0c\u6211\u4fbf\u53ea\u80fd\u60f3\u5230\u585e\u4e2a\u6a21\u7cca\u7248\u4e86\u3002
    \u56fe\u7247\u7f16\u7801\u90a3\u5757\u8fd8\u6ca1\u7ec6\u7a76\uff0c\u662f\u6307\u56fe\u7247\u4e0a\u4f20\u524d\uff0c\u7edf\u4e00\u5904\u7406\u6210\u6307\u5b9a\u683c\u5f0f\u540e\uff0c\u4fbf\u80fd\u9ed8\u8ba4\u7684\u4ece\u7cca\u5230\u6e05\u6670\u5c55\u793a\u4e86\u5417\uff1f
    \u6211\u518d\u67e5\u67e5\u770b <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : murmur <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    @devwolf \u6211\u4e0d\u77e5\u9053\u4f60\u662f\u8bf4\u7684\u54ea\u4e2a\u9875\u9762\uff0c\u4ed6\u4eec\u7684\u5217\u8868\u9875\u672c\u8eab\u5c31\u662f\u51e0\u5341 kb \u7684\u7f29\u7565\u56fe\uff0c\u5b8c\u5168\u4e0d\u5b58\u5728\u4ec0\u4e48\u8fc7\u5ea6\u52a0\u8f7d
    \u8fd9\u79cd\u80af\u5b9a\u662f\u70b9\u51fb\u624d\u52a0\u8f7d\u5927\u56fe
    \u552f\u4e00\u7684\u8bbe\u8ba1\uff0c\u770b\u4ed6\u4eec\u597d\u50cf\u5185\u7f6e\u4e86\u591a\u79cd\u7f29\u7565\u56fe\u683c\u5f0f\uff0c\u5e94\u5bf9\u4e0d\u540c\u7684\u5c4f\u5e55\u5927\u5c0f\uff0c\u7136\u540e\u7528\u5404\u79cd\u8ba1\u7b97\u53bb\u9009\u4e00\u4e2a\u9002\u5408\u7684
    \u4f46\u662f\u672c\u8d28\u4e0a\u8fd8\u662f\u5927\u5c0f\u56fe\u61d2\u52a0\u8f7d <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : sdqhzhm <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    progressive JPEG \u770b\u4e0b <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : cairnechen <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u4f60\u8bf4\u7684\u662f\u5f80\u4e0b\u6eda\u52a8\u65f6\u5019\u90a3\u4e2a\u4e00\u95ea\u800c\u8fc7\u7684\u6a21\u7cca\u72b6\u6001\uff1f <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : bnm965321 <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    nextjs\/Image \u597d\u50cf\u90fd\u505a\u597d\u4e86 <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : yuzo555 <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u4e0d\u77e5\u9053\u4f60\u9700\u8981\u5b9e\u73b0\u7684\u5177\u4f53\u6548\u679c\u662f\u4ec0\u4e48\uff0c\u5982\u679c\u662f\u4e00\u822c\u7f51\u9875\uff0c\u53ef\u4ee5\u5148\u52a0\u4e0a loading=”lazy”\uff0c\u8fd9\u6837\u5728\u56fe\u7247\u51fa\u73b0\u5728\u5c4f\u5e55\u4e0a\u65f6\u624d\u4f1a\u8fdb\u884c\u52a0\u8f7d\uff1b\u5176\u6b21\u5c31\u662f\u56fe\u7247\u672c\u8eab\u9700\u8981 progressive \uff0c\u8fd9\u4e2a\u662f\u56fe\u7247\u672c\u8eab\u51b3\u5b9a\u7684\uff0c\u6548\u679c\u662f\u5148\u52a0\u8f7d\u6a21\u7cca\u7684\u56fe\u50cf\u663e\u793a\u51fa\u6765\uff0c\u7136\u540e\u518d\u5f00\u59cb\u52a0\u8f7d\u5b8c\u6574\u7684\u7248\u672c\uff0c\u8fd9\u6837\u7f51\u7edc\u5dee\u7684\u7528\u6237\u4e00\u5f00\u59cb\u4e5f\u53ef\u4ee5\u770b\u4e2a\u5927\u6982\u3002
    \u5bf9\u8c61\u5b58\u50a8 \/CDN \u57fa\u672c\u4e0a\u90fd\u652f\u6301\u8fd9\u4e2a\u53c2\u6570\u7684\u3002 <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : devwolf <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    @cairnechen \u55ef\u3002\u4ea7\u54c1\u90a3\u8fb9\u540e\u6765\u8865\u5145\uff0c\u5373\u4f7f\u56fe\u7247\u5df2\u7ecf\u52a0\u8f7d\u5b8c\u6210\u53ef\u770b\uff0c\u4e5f\u5fc5\u987b\u5f97\u6709\u8fd9\u79cd\u6a21\u7cca\u6e10\u8fdb\u6548\u679c\u3002
    @yuzo555 \u5bf9\uff0c\u5c31\u662f\u8fd9\u4e2a\u53c2\u6570\u3002\u4e4b\u524d\u538b\u6839\u4e0d\u77e5\u9053\u6709\u8fd9\u4e48\u56de\u4e8b\uff0c\u5c31\u767d\u5fd9\u6d3b\u513f\u4e86\u597d\u4e45 <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : oott123 <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u65b9\u5411\u9519\u5566
    \u53c2\u8003\uff1a https:\/\/blurha.sh\/ <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : devwolf <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    @oott123 \u611f\u8c22\u63d0\u4f9b\u65b0\u601d\u8def\u3002
    blurhash \u8fd9\u4e2a\u60ca\u8273\u7684\u63d2\u4ef6\uff0c\u6211\u4e5f\u987a\u7740\u627e\u5230\u4e86\u5b83\u7684 react \u7248
    https:\/\/github.com\/woltapp\/react-blurhash
    \u7c97\u770b\u4e86\u4e00\u4e0b\uff0c\u611f\u89c9\u50cf md5 \u90a3\u6837\uff0c\u524d\u540e\u7684\u516c\u7528\u4e00\u5957\u52a0\u5bc6\u89e3\u7801\u89c4\u5219\uff0c\u540e\u7aef\u5728\u63a5\u53d7\u4e0a\u4f20\u56fe\u7247\u7684\u65f6\u5019\u751f\u6210\uff0c\u7136\u540e\u524d\u7aef\u63a5\u53d7\u8fd9\u4e2a hash \u53bb\u5b9e\u73b0\u6e10\u8fdb\u5f0f\u52a0\u8f7d\uff0c\u4f3c\u4e4e\u8fd8\u81ea\u5e26\u4e86\u6027\u80fd\u4f18\u5316(\u539f\u7406\u662f\u7cbe\u88c5\u7248 base64 \u4e48\uff1f) <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : devwolf <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    @murmur \u8c37\u6b4c\u8c03\u4f4e\u7aef\u8bbe\u5907\u5c31\u80fd\u770b\u5230\u5566\uff08\u6211\u4e5f\u662f\u4e0b\u5348\u624d\u77e5\u9053\u80fd\u8c03\u8fd9\u4e2a\uff09
    \"\u56fe\u7247\u6e10\u8fdb\u5f0f\u52a0\u8f7d(progressive)\u7684\u4e00\u6b21\u6d45\u5c1d\u8f84\u6b62\u7684\u63a2\u7d22\" <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : devwolf <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    @sdqhzhm <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"

    \u56fe\u7247\u6e10\u8fdb\u5f0f\u52a0\u8f7d(progressi…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/556561"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=556561"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/556561\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=556561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=556561"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=556561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}