{"id":15710,"date":"2020-04-01T17:55:05","date_gmt":"2020-04-01T10:55:05","guid":{"rendered":"https:\/\/kiencang.net\/?p=15710"},"modified":"2023-07-23T22:33:35","modified_gmt":"2023-07-23T15:33:35","slug":"lazysizes-js-lazy-load-anh-p3","status":"publish","type":"post","link":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/","title":{"rendered":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 3)"},"content":{"rendered":"\n<p>B\u1ea1n c\u00f3 th\u1ec3 xem ph\u1ea7n 1 v\u1ec1 lazySizes \u1edf \u0111\u00e2y: <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">kiencang.net\/lazysizes-js-lazy-load-anh-p1\/<\/a><\/p>\n\n\n\n<p>C\u00f2n \u0111\u00e2y l\u00e0 ph\u1ea7n 2: <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/\" target=\"_blank\" rel=\"noreferrer noopener\">kiencang.net\/lazysizes-js-lazy-load-anh-p2\/<\/a><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d6360cada\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d6360cada\"  type=\"checkbox\" id=\"item-6577d6360cada\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/#Trinh_duyet_ho_tro\" title=\"Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3\">Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/#Cac_plugin_ho_tro\" title=\"C\u00e1c plugin h\u1ed7 tr\u1ee3\">C\u00e1c plugin h\u1ed7 tr\u1ee3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/#Meo_Chi_dinh_kich_thuoc_hinh_anh_de_toi_thieu_hoa_reflows_va_tranh_hien_tuong_nhay_trang\" title=\"M\u1eb9o: Ch\u1ec9 \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh (\u0111\u1ec3 t\u1ed1i thi\u1ec3u h\u00f3a reflows v\u00e0 tr\u00e1nh hi\u1ec7n t\u01b0\u1ee3ng nh\u1ea3y trang)\">M\u1eb9o: Ch\u1ec9 \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh (\u0111\u1ec3 t\u1ed1i thi\u1ec3u h\u00f3a reflows v\u00e0 tr\u00e1nh hi\u1ec7n t\u01b0\u1ee3ng nh\u1ea3y trang)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/#Meo_Ban_nen_ap_dung_lazySizes_o_dau_va_nhu_the_nao\" title=\"M\u1eb9o: B\u1ea1n n\u00ean \u00e1p d\u1ee5ng lazySizes \u1edf \u0111\u00e2u v\u00e0 nh\u01b0 th\u1ebf n\u00e0o\">M\u1eb9o: B\u1ea1n n\u00ean \u00e1p d\u1ee5ng lazySizes \u1edf \u0111\u00e2u v\u00e0 nh\u01b0 th\u1ebf n\u00e0o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Trinh_duyet_ho_tro\"><\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>lazysizes<\/strong> h\u1ed7 tr\u1ee3 t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t m\u00e0 c\u00f3 h\u1ed7 tr\u1ee3 <em><a href=\"http:\/\/caniuse.com\/#feat=getelementsbyclassname\" target=\"_blank\" rel=\"noreferrer noopener\">document.getElementsByClassName<\/a><\/em> (= t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t ngo\u1ea1i tr\u1eeb IE8). Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n h\u1ed7 tr\u1ee3 IE8, h\u00e3y xem <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/noscript\/README.md#ie8\" target=\"_blank\" rel=\"noreferrer noopener\">ti\u1ec7n \u00edch m\u1edf r\u1ed9ng noscript<\/a> (ho\u1eb7c s\u1eed d\u1ee5ng m\u1ed9t m\u1eabu \u0111i\u1ec1u ch\u1ec9nh cho noscript ho\u1eb7c m\u1eabu LQIP).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_plugin_ho_tro\"><\/span>C\u00e1c plugin h\u1ed7 tr\u1ee3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u1ea1n n\u00ean k\u1ebft h\u1ee3p (concat) t\u1ea5t c\u1ea3 plugin c\u00f9ng v\u1edbi lazySizes. Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n kh\u00f4ng concat th\u00ec l\u1eddi khuy\u00ean l\u00e0 h\u00e3y \u0111\u1ec3 c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a plugin <em>\u0111\u1ee9ng tr\u01b0\u1edbc<\/em> \u0111o\u1ea1n m\u00e3 ch\u00ednh c\u1ee7a lazySizes.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/respimg\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>respimg polyfill plugin<\/strong><\/a><\/p>\n\n\n\n<p>plugin respimg polyfill l\u00e0 c\u00e1ch polyfill (v\u00e1 v\u00edu) thay th\u1ebf si\u00eau nh\u1eb9 cho h\u1ea7u h\u1ebft c\u00e1c t\u1eadp con c\u1ee7a \u1ea3nh \u0111\u00e1p \u1ee9ng (<em>srcset<\/em> v\u00e0 <em>picture<\/em>).<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/optimumx\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>OPTIMUMX plugin<\/strong><\/a><\/p>\n\n\n\n<p>Thu\u1ed9c t\u00ednh <em>srcset<\/em> v\u1edbi m\u00f4 t\u1ea3 <em>w<\/em> v\u00e0 thu\u1ed9c t\u00ednh <em>sizes<\/em> c\u0169ng t\u1ef1 \u0111\u1ed9ng bao g\u1ed3m c\u00e1c \u1ea3nh c\u00f3 DPI cao. Nh\u01b0ng t\u1eebng \u1ea3nh c\u00f3 m\u1eadt \u0111\u1ed9 t\u1ed1i \u01b0u \u0111i\u1ec3m \u1ea3nh kh\u00e1c nhau, c\u00e1i c\u00f3 th\u1ec3 th\u1ea5p h\u01a1n (v\u00ed d\u1ee5 1,5x) so v\u1edbi m\u1eadt \u0111\u1ed9 \u0111i\u1ec3m \u1ea3nh thi\u1ebft b\u1ecb c\u1ee7a b\u1ea1n (2x ho\u1eb7c 3x). Th\u00f4ng tin n\u00e0y tr\u00ecnh duy\u1ec7t kh\u00f4ng bi\u1ebft \u0111\u01b0\u1ee3c v\u00e0 do v\u1eady kh\u00f4ng th\u1ec3 th\u1ef1c hi\u1ec7n t\u1ed1i \u01b0u. <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/optimumx\" target=\"_blank\" rel=\"noreferrer noopener\">Ti\u1ec7n \u00edch m\u1edf r\u1ed9ng lazySizes optimumx<\/a> cho b\u1ea1n nhi\u1ec1u t\u00f9y ch\u1ec9nh \u0111\u1ec3 c\u00e2n b\u1eb1ng trao \u0111\u1ed5i gi\u1eefa ch\u1ea5t l\u01b0\u1ee3ng nh\u1eadn th\u1ee9c (perceived quality) v\u00e0 t\u1ed1c \u0111\u1ed9 nh\u1eadn th\u1ee9c (perceived performance).<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/parent-fit\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>parent-fit extension<\/strong><\/a><\/p>\n\n\n\n<p>Plugin parent fit m\u1edf r\u1ed9ng t\u00ednh n\u0103ng <em>data-sizes=&#8221;auto&#8221;<\/em> \u0111\u1ec3 t\u00ednh to\u00e1n ch\u00ednh x\u00e1c <em>sizes<\/em> cho ph\u1ea7n t\u1eed \u1ea3nh <em>object-fit: contain | cover<\/em> v\u00e0 c\u00e1c y\u1ebfu t\u1ed1 h\u00ecnh \u1ea3nh b\u1ecb h\u1ea1n ch\u1ebf chi\u1ec1u cao (v\u00e0 chi\u1ec1u r\u1ed9ng) kh\u00e1c n\u00f3i chung.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/object-fit\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>object-fit polyfill extension<\/strong><\/a><\/p>\n\n\n\n<p>Plugin object fit polyfill th\u1ef1c hi\u1ec7n nhi\u1ec7m v\u1ee5 polyfill thu\u1ed9c t\u00ednh object-fit v\u00e0 object-position trong c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/blur-up\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>plugin blur up \/effect<\/strong><\/a><\/p>\n\n\n\n<p>Plugin blur up \/ effect cho ph\u00e9p b\u1ea1n t\u1ea1o hi\u1ec7u \u1ee9ng fade \/ blur up \u0111\u1eb9p m\u1eaft v\u1edbi c\u00e1c <a href=\"https:\/\/kiencang.net\/anh-lqip\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea3nh LQIP (\u1ea3nh gi\u1eef ch\u1ed7 ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p)<\/a>, c\u00e1i s\u1ebd gi\u00fap c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng v\u00e0 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 nh\u1eadn th\u1ee9c trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n s\u1eed d\u1ee5ng c\u00e1ch ti\u1ebfp c\u1eadn d\u00f9ng \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/attrchange\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>extension attrchange \/ re-initialization<\/strong><\/a> (\u0111\u1eb7c bi\u1ec7t khuy\u1ebfn kh\u00edch n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng Reacr, Angular, v\u00e2n v\u00e2n)<\/p>\n\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n thay \u0111\u1ed5i thu\u1ed9c t\u00ednh <em>data-src \/ data-srcset<\/em> c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed lazy load \u0111\u00e3 chuy\u1ec3n \u0111\u1ed5i, b\u1ea1n ph\u1ea3i th\u00eam l\u1ea1i class <em>lazyload<\/em> v\u00e0o ph\u1ea7n t\u1eed. <\/p>\n\n\n\n<p>Ti\u1ec7n \u00edch m\u1edf r\u1ed9ng attchange \/ re-initialization t\u1ef1 \u0111\u1ed9ng ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i x\u1ea3y ra v\u1edbi c\u00e1c thu\u1ed9c t\u00ednh <em>data-*<\/em> v\u00e0 th\u00eam class v\u00e0o cho b\u1ea1n.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/artdirect\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>plugin artdirect<\/strong><\/a><\/p>\n\n\n\n<p>Plugin artdirect cho ph\u00e9p b\u1ea1n to\u00e0n quy\u1ec1n \u0111i\u1ec1u khi\u1ec3n art direction th\u00f4ng qua CSS.<\/p>\n\n\n\n<p><strong>C\u00e1c <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\" target=\"_blank\" rel=\"noreferrer noopener\">plugin\/ti\u1ec7n \u00edch m\u1edf r\u1ed9ng kh\u00e1c<\/a><\/strong><\/p>\n\n\n\n<p>C\u0169ng c\u00f3 c\u00e1c ti\u1ec7n \u00edch\/plugin kh\u00e1c trong <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\" target=\"_blank\" rel=\"noreferrer noopener\">th\u01b0 m\u1ee5c plugin<\/a> \u0111\u1ec3 b\u1ea1n tham kh\u1ea3o. B\u1ea1n h\u00e3y tho\u1ea3i m\u00e1i n\u1ebfu mu\u1ed1n t\u1ea1o ra m\u1ed9t c\u00e1i m\u1edbi cho d\u1ef1 \u00e1n c\u1ee7a b\u1ea3n th\u00e2n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Meo_Chi_dinh_kich_thuoc_hinh_anh_de_toi_thieu_hoa_reflows_va_tranh_hien_tuong_nhay_trang\"><\/span>M\u1eb9o: Ch\u1ec9 \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh (\u0111\u1ec3 t\u1ed1i thi\u1ec3u h\u00f3a reflows v\u00e0 tr\u00e1nh hi\u1ec7n t\u01b0\u1ee3ng nh\u1ea3y trang)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 t\u1ed1i thi\u1ec3u h\u00f3a \u1ea3nh h\u01b0\u1edfng c\u1ee7a reflows, hi\u1ec7n t\u01b0\u1ee3ng nh\u1ea3y n\u1ed9i dung ho\u1eb7c c\u00e1c h\u00e0nh vi kh\u00f4ng th\u1ec3 d\u1ef1 \u0111o\u00e1n \u0111\u01b0\u1ee3c tr\u00ean m\u1ed9t s\u1ed1 widget JS kh\u00e1c (ch\u1eb3ng h\u1ea1n isotope, masonry, m\u1ed9t s\u1ed1 slider\/b\u0103ng chuy\u1ec1n&#8230;). Chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a \u1ea3nh ph\u1ea3i c\u00f3 kh\u1ea3 n\u0103ng t\u00ednh to\u00e1n \u0111\u01b0\u1ee3c b\u1edfi tr\u00ecnh duy\u1ec7t tr\u01b0\u1edbc khi b\u1ea3n th\u00e2n ngu\u1ed3n \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n    style=\"width: 350px; height: 150px;\"\n\tdata-srcset=\"http:\/\/placehold.it\/350x150 1x,\n    http:\/\/placehold.it\/700x300 2x\"\n    data-src=\"http:\/\/placehold.it\/350x150\"\n    class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n\n<p>V\u1edbi c\u00e1c \u1ea3nh ph\u1ea3n h\u1ed3i linh ho\u1ea1t, k\u1ef9 thu\u1eadt m\u1edf r\u1ed9ng t\u1ef7 l\u1ec7 CSS intrinsic ph\u1ea3i \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n.ratio-container {\n    position: relative;\n}\n.ratio-container:after {\n    content: '';\n    display: block;\n    height: 0;\n    width: 100%;\n    \/* 16:9 = 56.25% = calc(9 \/ 16 * 100%) *\/\n    padding-bottom: 42.86%;\n}\n.ratio-container &gt; * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: block;\n}\n&lt;\/style&gt;\n&lt;div class=\"ratio-container\"&gt;\n    &lt;img\n        data-sizes=\"auto\"\n        data-srcset=\"http:\/\/placehold.it\/175x75 175w,\n        http:\/\/placehold.it\/350x150 350w,\n        http:\/\/placehold.it\/700x300 700w,\n        http:\/\/placehold.it\/1400x600 1400w\"\n        data-src=\"http:\/\/placehold.it\/700x300\"\n        class=\"lazyload\" \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Meo_Ban_nen_ap_dung_lazySizes_o_dau_va_nhu_the_nao\"><\/span>M\u1eb9o: B\u1ea1n n\u00ean \u00e1p d\u1ee5ng lazySizes \u1edf \u0111\u00e2u v\u00e0 nh\u01b0 th\u1ebf n\u00e0o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>D\u00f9 t\u00ednh n\u0103ng lazy load l\u00e0 t\u00ednh n\u0103ng r\u1ea5t th\u00fa v\u1ecb, \u0111i\u1ec1u quan tr\u1ecdng v\u1edbi ng\u01b0\u1eddi d\u00f9ng trong vi\u1ec7c xem \u1ea3nh l\u00e0 n\u00f3 c\u1ea7n t\u1ea3i c\u00e0ng nhanh c\u00e0ng t\u1ed1t (h\u1ea7u h\u1ebft ng\u01b0\u1eddi d\u00f9ng b\u1eaft \u0111\u1ea7u t\u01b0\u01a1ng t\u00e1c v\u1edbi trang sau khi \u1ea3nh trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t \u0111\u01b0\u1ee3c t\u1ea3i xong).<\/p>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p th\u01b0\u1eddng x\u1ea3y ra l\u00e0 b\u1ea1n k\u1ebft h\u1ee3p t\u1ea5t c\u1ea3 c\u00e1c \u0111o\u1ea1n script v\u00e0o m\u1ed9t script l\u1edbn v\u00e0 th\u00eam n\u00f3 v\u00e0o cu\u1ed1i trang, nh\u01b0ng b\u1eb1ng vi\u1ec7c t\u00e1ch JavaScript th\u00e0nh hai ph\u1ea7n s\u1ebd t\u1ed1t h\u01a1n cho t\u1ed1c \u0111\u1ed9 nh\u1eadn th\u1ee9c. Trong \u0111\u00f3 m\u1ed9t file nh\u1ecf bao g\u1ed3m t\u1ea5t c\u1ea3 c\u00e1c m\u00e3 JavaScript c\u00f3 \u1ea3nh h\u01b0\u1edfng l\u1edbn l\u00ean n\u1ed9i dung ho\u1eb7c UI v\u00e0 m\u1ed9t file l\u1edbn kh\u00e1c bao g\u1ed3m c\u00e1c m\u00e3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn h\u00e0nh vi th\u00f4ng th\u01b0\u1eddng c\u1ee7a trang.<\/p>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 JavaScript nh\u1ecf n\u00e0y ph\u1ea3i bao g\u1ed3m lazySizes (v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c plugin c\u1ee7a n\u00f3), n\u00ean \u0111\u01b0\u1ee3c <strong>\u0111\u1eb7t tr\u01b0\u1edbc<\/strong> b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed ch\u1eb7n hi\u1ec3n th\u1ecb n\u00e0o (v\u00ed d\u1ee5 c\u00e1c script) n\u1ebfu n\u00f3 \u1edf cu\u1ed1i body ho\u1eb7c sau b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed ch\u1eb7n hi\u1ec3n th\u1ecb n\u00e0o (v\u00ed d\u1ee5: script, stylesheets) n\u1ebfu n\u00f3 \u0111\u01b0\u1ee3c \u0111\u1eb7t \u1edf ph\u1ea7n head \u0111\u1ec3 t\u1ea3i n\u1ed9i dung quan tr\u1ecdng c\u00e0ng nhanh c\u00e0ng t\u1ed1t (L\u01b0u \u00fd: C\u0169ng c\u00f3 th\u1ec3 c\u00f3 \u00fd ngh\u0129a khi g\u1ecdi <em>lazySizes.init();<\/em> ngay sau lazySizes v\u00e0 t\u1ea5t c\u1ea3 plugin \u0111\u01b0\u1ee3c th\u00eam v\u00e0o c\u1ee7a n\u00f3).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">T\u1ea1i sao t\u00f4i ph\u00e1t tri\u1ec3n lazysizes<\/h3>\n\n\n\n<p>Trong qu\u00e1 kh\u1ee9, t\u00f4i th\u01b0\u1eddng g\u1eb7p ph\u1ea3i v\u1ea5n \u0111\u1ec1 khi s\u1eed d\u1ee5ng c\u00e1c \u1ee9ng d\u1ee5ng cho ph\u00e9p lazy load, b\u1edfi v\u00ec &#8220;ch\u1ee9c n\u0103ng ki\u1ec3m tra ch\u00ednh&#8221; \u0111\u01b0\u1ee3c g\u1ecdi nhi\u1ec1u l\u1ea7n v\u1edbi t\u1ea7n s\u1ed1 cao (c\u00e1ch s\u1eed d\u1ee5ng tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n, xem th\u00eam \u1edf \u0111\u00e2y: <a href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/#Lazy_load_anh\" target=\"_blank\" rel=\"noreferrer noopener\">speed.family\/lazy-load-anh-va-video\/#Lazy_load_anh<\/a>). \u0110i\u1ec1u \u0111\u00f3 l\u00e0m cho n\u00f3 kh\u00f3 c\u00f3 th\u1ec3 ho\u00e0n th\u00e0nh c\u1ea3 hai m\u1ee5c \u0111\u00edch l\u00e0 t\u1ed1i \u01b0u cho runtime v\u00e0 s\u1eed d\u1ee5ng b\u1ed9 nh\u1edb hi\u1ec7u qu\u1ea3. V\u00e0 khi nh\u00ecn s\u00e2u v\u00e0o c\u00e1c \u0111o\u1ea1n m\u00e3 ngu\u1ed3n c\u1ee7a h\u1ea7u h\u1ebft c\u00e1c \u1ee9ng d\u1ee5ng lazy load b\u1ea1n c\u0169ng th\u01b0\u1eddng ph\u00e1t hi\u1ec7n ra c\u00e1c nh\u00e0 l\u1eadp tr\u00ecnh l\u01b0\u1eddi bi\u1ebfng nh\u01b0 th\u1ebf n\u00e0o (\u00fd l\u00e0 vi\u1ebft m\u00e3 kh\u00f4ng \u0111\u01b0\u1ee3c t\u1ed1t).<\/p>\n\n\n\n<p>Nh\u01b0ng trong th\u1ebf gi\u1edbi c\u1ee7a c\u00e1c \u1ea3nh \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a cho \u0111\u00e1p \u1ee9ng retina v\u00e0 widget JS nh\u01b0 b\u0103ng chuy\u1ec1n h\u00ecnh \u1ea3nh ho\u1eb7c tab (v\u1edbi nhi\u1ec1u \u1ea3nh ban \u0111\u1ea7u b\u1ecb \u1ea9n), do v\u1eady t\u1ea3i \u1ea3nh theo ph\u01b0\u01a1ng th\u1ee9c lazy load ng\u00e0y c\u00e0ng quan tr\u1ecdng h\u01a1n, v\u00ec th\u1ebf m\u00e0 t\u00f4i t\u1ea1o d\u1ef1 \u00e1n n\u00e0y.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea1n c\u00f3 th\u1ec3 xem ph\u1ea7n 1 v\u1ec1 lazySizes \u1edf \u0111\u00e2y: kiencang.net\/lazysizes-js-lazy-load-anh-p1\/ C\u00f2n \u0111\u00e2y l\u00e0 ph\u1ea7n 2: kiencang.net\/lazysizes-js-lazy-load-anh-p2\/ Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 lazysizes h\u1ed7 tr\u1ee3 t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t m\u00e0 c\u00f3 h\u1ed7 tr\u1ee3 document.getElementsByClassName (= t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t ngo\u1ea1i tr\u1eeb IE8). Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n h\u1ed7 tr\u1ee3 IE8, h\u00e3y xem ti\u1ec7n \u00edch m\u1edf &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274,275],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"B\u1ea1n c\u00f3 th\u1ec3 xem ph\u1ea7n 1 v\u1ec1 lazySizes \u1edf \u0111\u00e2y: kiencang.net\/lazysizes-js-lazy-load-anh-p1\/ C\u00f2n \u0111\u00e2y l\u00e0 ph\u1ea7n 2: kiencang.net\/lazysizes-js-lazy-load-anh-p2\/ Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 lazysizes h\u1ed7 tr\u1ee3 t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t m\u00e0 c\u00f3 h\u1ed7 tr\u1ee3 document.getElementsByClassName (= t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t ngo\u1ea1i tr\u1eeb IE8). Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n h\u1ed7 tr\u1ee3 IE8, h\u00e3y xem ti\u1ec7n \u00edch m\u1edf &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-01T10:55:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T15:33:35+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/","og_locale":"vi_VN","og_type":"article","og_title":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"B\u1ea1n c\u00f3 th\u1ec3 xem ph\u1ea7n 1 v\u1ec1 lazySizes \u1edf \u0111\u00e2y: kiencang.net\/lazysizes-js-lazy-load-anh-p1\/ C\u00f2n \u0111\u00e2y l\u00e0 ph\u1ea7n 2: kiencang.net\/lazysizes-js-lazy-load-anh-p2\/ Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 lazysizes h\u1ed7 tr\u1ee3 t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t m\u00e0 c\u00f3 h\u1ed7 tr\u1ee3 document.getElementsByClassName (= t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t ngo\u1ea1i tr\u1eeb IE8). Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n h\u1ed7 tr\u1ee3 IE8, h\u00e3y xem ti\u1ec7n \u00edch m\u1edf &hellip;","og_url":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-01T10:55:05+00:00","article_modified_time":"2023-07-23T15:33:35+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/","url":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/","name":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-01T10:55:05+00:00","dateModified":"2023-07-23T15:33:35+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 3)"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15710"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=15710"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15710\/revisions"}],"predecessor-version":[{"id":24362,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15710\/revisions\/24362"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=15710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=15710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=15710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}