{"id":187332,"date":"2024-11-11T13:23:19","date_gmt":"2024-11-11T05:23:19","guid":{"rendered":"https:\/\/server.hk\/cnblog\/187332\/"},"modified":"2024-11-11T13:23:20","modified_gmt":"2024-11-11T05:23:20","slug":"%e6%95%b8%e6%93%9a%e5%ba%ab%e5%9c%96%e7%89%87%e9%a0%90%e5%8a%a0%e8%bc%89%e6%8a%80%e5%b7%a7%e6%8e%a2%e7%a9%b6-%e6%95%b8%e6%93%9a%e5%ba%ab%e7%9a%84%e5%9c%96%e7%89%87%e5%8f%af%e4%bb%a5%e9%a0%90%e5%8a%a0","status":"publish","type":"post","link":"https:\/\/server.hk\/cnblog\/187332\/","title":{"rendered":"\u6578\u64da\u5eab\u5716\u7247\u9810\u52a0\u8f09\u6280\u5de7\u63a2\u7a76 (\u6578\u64da\u5eab\u7684\u5716\u7247\u53ef\u4ee5\u9810\u52a0\u8f09\u55ce)"},"content":{"rendered":"<h1 id=\"%e6%95%b8%e6%93%9a%e5%ba%ab%e5%9c%96%e7%89%87%e9%a0%90%e5%8a%a0%e8%bc%89%e6%8a%80%e5%b7%a7%e6%8e%a2%e7%a9%b6-%e6%95%b8%e6%93%9a%e5%ba%ab%e7%9a%84%e5%9c%96%e7%89%87%e5%8f%af%e4%bb%a5%e9%a0%90%e5%8a%a0-ToCpKdMkJj\">\u6578\u64da\u5eab\u5716\u7247\u9810\u52a0\u8f09\u6280\u5de7\u63a2\u7a76 (\u6578\u64da\u5eab\u7684\u5716\u7247\u53ef\u4ee5\u9810\u52a0\u8f09\u55ce)<\/h1>\n<p>\u5728\u73fe\u4eca\u7684\u7db2\u7d61\u74b0\u5883\u4e2d\uff0c\u5716\u7247\u5df2\u6210\u70ba\u7db2\u7ad9\u5167\u5bb9\u7684\u91cd\u8981\u7d44\u6210\u90e8\u5206\u3002\u7136\u800c\uff0c\u5716\u7247\u7684\u52a0\u8f09\u901f\u5ea6\u5f80\u5f80\u6703\u5f71\u97ff\u7528\u6236\u9ad4\u9a57\uff0c\u7279\u5225\u662f\u5728\u6578\u64da\u5eab\u9a45\u52d5\u7684\u7db2\u7ad9\u4e2d\u3002\u672c\u6587\u5c07\u63a2\u8a0e\u6578\u64da\u5eab\u5716\u7247\u7684\u9810\u52a0\u8f09\u6280\u5de7\uff0c\u4e26\u5206\u6790\u5176\u53ef\u884c\u6027\u53ca\u5be6\u65bd\u65b9\u6cd5\u3002<\/p>\n<h2 id=\"%e4%bb%80%e9%ba%bc%e6%98%af%e5%9c%96%e7%89%87%e9%a0%90%e5%8a%a0%e8%bc%89%ef%bc%9f-ToCpKdMkJj\">\u4ec0\u9ebc\u662f\u5716\u7247\u9810\u52a0\u8f09\uff1f<\/h2>\n<p>\u5716\u7247\u9810\u52a0\u8f09\u662f\u6307\u5728\u7528\u6236\u8a2a\u554f\u7db2\u9801\u4e4b\u524d\uff0c\u63d0\u524d\u5c07\u5716\u7247\u52a0\u8f09\u5230\u700f\u89bd\u5668\u7684\u7de9\u5b58\u4e2d\u3002\u9019\u6a23\u505a\u7684\u76ee\u7684\u662f\u70ba\u4e86\u63d0\u9ad8\u9801\u9762\u7684\u52a0\u8f09\u901f\u5ea6\uff0c\u6e1b\u5c11\u7528\u6236\u7b49\u5f85\u6642\u9593\u3002\u9810\u52a0\u8f09\u6280\u8853\u7279\u5225\u9069\u5408\u65bc\u9700\u8981\u986f\u793a\u5927\u91cf\u5716\u7247\u7684\u7db2\u7ad9\uff0c\u5982\u96fb\u5b50\u5546\u52d9\u5e73\u53f0\u3001\u793e\u4ea4\u5a92\u9ad4\u548c\u5716\u7247\u5eab\u7b49\u3002<\/p>\n<h2 id=\"%e6%95%b8%e6%93%9a%e5%ba%ab%e4%b8%ad%e7%9a%84%e5%9c%96%e7%89%87%e7%ae%a1%e7%90%86-ToCpKdMkJj\">\u6578\u64da\u5eab\u4e2d\u7684\u5716\u7247\u7ba1\u7406<\/h2>\n<p>\u5728\u6578\u64da\u5eab\u4e2d\uff0c\u5716\u7247\u901a\u5e38\u4ee5\u4e8c\u9032\u5236\u6578\u64da\uff08BLOB\uff09\u6216URL\u7684\u5f62\u5f0f\u5b58\u5132\u3002\u4f7f\u7528BLOB\u5b58\u5132\u5716\u7247\u7684\u512a\u9ede\u662f\u53ef\u4ee5\u5c07\u5716\u7247\u8207\u5176\u4ed6\u6578\u64da\u7dca\u5bc6\u7d50\u5408\uff0c\u4f46\u7f3a\u9ede\u662f\u53ef\u80fd\u6703\u5c0e\u81f4\u6578\u64da\u5eab\u7684\u5927\u5c0f\u8fc5\u901f\u589e\u9577\uff0c\u5f71\u97ff\u6027\u80fd\u3002\u76f8\u5c0d\u800c\u8a00\uff0c\u4f7f\u7528URL\u5b58\u5132\u5716\u7247\u5247\u53ef\u4ee5\u6e1b\u5c11\u6578\u64da\u5eab\u7684\u8ca0\u64d4\uff0c\u4e26\u4e14\u66f4\u5bb9\u6613\u9032\u884c\u5716\u7247\u7684\u7ba1\u7406\u548c\u66f4\u65b0\u3002<\/p>\n<h2 id=\"%e9%a0%90%e5%8a%a0%e8%bc%89%e7%9a%84%e5%8f%af%e8%a1%8c%e6%80%a7-ToCpKdMkJj\">\u9810\u52a0\u8f09\u7684\u53ef\u884c\u6027<\/h2>\n<p>\u5728\u6578\u64da\u5eab\u4e2d\u9810\u52a0\u8f09\u5716\u7247\u662f\u53ef\u884c\u7684\uff0c\u4f46\u9700\u8981\u8003\u616e\u4ee5\u4e0b\u5e7e\u500b\u56e0\u7d20\uff1a<\/p>\n<ul>\n<li><strong>\u5716\u7247\u5927\u5c0f\uff1a<\/strong>\u5927\u5716\u7247\u6703\u4f54\u7528\u8f03\u591a\u7684\u5e36\u5bec\u548c\u5b58\u5132\u7a7a\u9593\uff0c\u5f71\u97ff\u52a0\u8f09\u901f\u5ea6\u3002\u56e0\u6b64\uff0c\u61c9\u9078\u64c7\u5408\u9069\u7684\u5716\u7247\u683c\u5f0f\u548c\u5927\u5c0f\u3002<\/li>\n<li><strong>\u7528\u6236\u884c\u70ba\uff1a<\/strong>\u9810\u52a0\u8f09\u7684\u5716\u7247\u61c9\u6839\u64da\u7528\u6236\u7684\u884c\u70ba\u9032\u884c\u9078\u64c7\uff0c\u4f8b\u5982\u7528\u6236\u7d93\u5e38\u8a2a\u554f\u7684\u9801\u9762\u6216\u71b1\u9580\u7522\u54c1\u7684\u5716\u7247\u3002<\/li>\n<li><strong>\u7de9\u5b58\u7b56\u7565\uff1a<\/strong>\u5408\u7406\u7684\u7de9\u5b58\u7b56\u7565\u53ef\u4ee5\u63d0\u9ad8\u9810\u52a0\u8f09\u7684\u6548\u7387\uff0c\u6e1b\u5c11\u91cd\u8907\u52a0\u8f09\u7684\u60c5\u6cc1\u3002<\/li>\n<\/ul>\n<h2 id=\"%e5%af%a6%e6%96%bd%e9%a0%90%e5%8a%a0%e8%bc%89%e7%9a%84%e6%8a%80%e5%b7%a7-ToCpKdMkJj\">\u5be6\u65bd\u9810\u52a0\u8f09\u7684\u6280\u5de7<\/h2>\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e9b\u5be6\u65bd\u5716\u7247\u9810\u52a0\u8f09\u7684\u6280\u5de7\uff1a<\/p>\n<h3 id=\"1-%e4%bd%bf%e7%94%a8html%e7%9a%84link%e6%a8%99%e7%b1%a4-ToCpKdMkJj\">1. \u4f7f\u7528HTML\u7684link\u6a19\u7c64<\/h3>\n<p>\u53ef\u4ee5\u5728HTML\u4e2d\u4f7f\u7528\u6a19\u7c64\u4f86\u9810\u52a0\u8f09\u5716\u7247\u3002\u4f8b\u5982\uff1a<\/p>\n<pre><code>&lt;link rel=\"preload\" href=\"image.jpg\" as=\"image\"&gt;<\/code><\/pre>\n<p>\u9019\u6a23\u53ef\u4ee5\u544a\u8a34\u700f\u89bd\u5668\u63d0\u524d\u52a0\u8f09\u6307\u5b9a\u7684\u5716\u7247\u3002<\/p>\n<h3 id=\"2-javascript%e5%8b%95%e6%85%8b%e5%8a%a0%e8%bc%89-ToCpKdMkJj\">2. JavaScript\u52d5\u614b\u52a0\u8f09<\/h3>\n<p>\u4f7f\u7528JavaScript\u53ef\u4ee5\u6839\u64da\u7528\u6236\u7684\u884c\u70ba\u52d5\u614b\u52a0\u8f09\u5716\u7247\u3002\u4f8b\u5982\uff0c\u7576\u7528\u6236\u6efe\u52d5\u5230\u67d0\u500b\u5340\u57df\u6642\uff0c\u53ef\u4ee5\u63d0\u524d\u52a0\u8f09\u8a72\u5340\u57df\u7684\u5716\u7247\uff1a<\/p>\n<pre><code>window.addEventListener('scroll', function() {\n    var img = document.createElement('img');\n    img.src = 'image.jpg';\n    document.body.appendChild(img);\n});<\/code><\/pre>\n<h3 id=\"3-%e4%bd%bf%e7%94%a8%e6%87%b6%e5%8a%a0%e8%bc%89%e6%8a%80%e8%a1%93-ToCpKdMkJj\">3. \u4f7f\u7528\u61f6\u52a0\u8f09\u6280\u8853<\/h3>\n<p>\u61f6\u52a0\u8f09\u6280\u8853\u53ef\u4ee5\u5728\u7528\u6236\u5373\u5c07\u67e5\u770b\u67d0\u500b\u5716\u7247\u6642\u624d\u9032\u884c\u52a0\u8f09\uff0c\u9019\u6a23\u53ef\u4ee5\u6e1b\u5c11\u521d\u59cb\u52a0\u8f09\u7684\u5716\u7247\u6578\u91cf\uff0c\u63d0\u9ad8\u9801\u9762\u52a0\u8f09\u901f\u5ea6\u3002<\/p>\n<h2 id=\"%e7%b5%90%e8%ab%96-ToCpKdMkJj\">\u7d50\u8ad6<\/h2>\n<p>\u6578\u64da\u5eab\u4e2d\u7684\u5716\u7247\u9810\u52a0\u8f09\u662f\u4e00\u500b\u6709\u6548\u7684\u63d0\u9ad8\u7528\u6236\u9ad4\u9a57\u7684\u6280\u8853\u3002\u901a\u904e\u5408\u7406\u7684\u7ba1\u7406\u548c\u5be6\u65bd\u9810\u52a0\u8f09\u6280\u5de7\uff0c\u53ef\u4ee5\u986f\u8457\u63d0\u5347\u7db2\u7ad9\u7684\u6027\u80fd\u548c\u97ff\u61c9\u901f\u5ea6\u3002\u7121\u8ad6\u662f\u4f7f\u7528HTML\u6a19\u7c64\u3001JavaScript\u52d5\u614b\u52a0\u8f09\u9084\u662f\u61f6\u52a0\u8f09\u6280\u8853\uff0c\u9078\u64c7\u5408\u9069\u7684\u65b9\u6cd5\u90fd\u80fd\u5e6b\u52a9\u7db2\u7ad9\u66f4\u597d\u5730\u670d\u52d9\u7528\u6236\u3002<\/p>\n<p>\u5982\u679c\u60a8\u5c0d\u65bc\u5982\u4f55\u5728\u60a8\u7684\u7db2\u7ad9\u4e0a\u5be6\u65bd\u9019\u4e9b\u6280\u8853\u6709\u8208\u8da3\uff0c\u6216\u8005\u9700\u8981\u66f4\u9ad8\u6548\u7684\u89e3\u6c7a\u65b9\u6848\uff0c\u8003\u616e\u4f7f\u7528<a href=\"https:\/\/server.hk\">\u9999\u6e2fVPS<\/a>\u6216<a href=\"https:\/\/server.hk\">\u96f2\u4f3a\u670d\u5668<\/a>\u4f86\u63d0\u5347\u60a8\u7684\u7db2\u7ad9\u6027\u80fd\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u63a2\u7d22\u6578\u64da\u5eab\u5716\u7247\u9810\u52a0\u8f09\u6280\u5de7\uff0c\u4e86\u89e3\u5982\u4f55\u6709\u6548\u63d0\u5347\u5716\u7247\u52a0\u8f09\u901f\u5ea6\u8207\u7528\u6236\u9ad4\u9a57\u3002<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101],"tags":[],"class_list":["post-187332","post","type-post","status-publish","format-standard","hentry","category-database"],"_links":{"self":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/187332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/comments?post=187332"}],"version-history":[{"count":1,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/187332\/revisions"}],"predecessor-version":[{"id":187333,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/187332\/revisions\/187333"}],"wp:attachment":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/media?parent=187332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/categories?post=187332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/tags?post=187332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}