{"id":16872,"date":"2020-04-05T07:02:34","date_gmt":"2020-04-05T00:02:34","guid":{"rendered":"https:\/\/kiencang.net\/?p=15861"},"modified":"2020-04-05T07:02:34","modified_gmt":"2020-04-05T00:02:34","slug":"lazysizes-js-lazy-load-anh-p2","status":"publish","type":"post","link":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/","title":{"rendered":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 2)"},"content":{"rendered":"\n<p>B\u1ea1n \u0111\u1ecdc c\u00f3 th\u1ec3 tham kh\u1ea3o <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">ph\u1ea7n 1 v\u1ec1 th\u01b0 vi\u1ec7n lazysizes<\/a> \u1edf \u0111\u00e2y.<\/p>\n\n\n<h2 class=\"wp-block-heading\">JS API<\/h2>\n\n\n<p><strong>lazysizes<\/strong> t\u1ef1 \u0111\u1ed9ng nh\u1eadn di\u1ec7n c\u00e1c ph\u1ea7n t\u1eed m\u1edbi v\u1edbi class <em>lazyload<\/em>, v\u00ec th\u1ebf b\u1ea1n kh\u00f4ng c\u1ea7n th\u1ef1c hi\u1ec7n l\u1eddi g\u1ecdi ho\u1eb7c c\u1ea5u h\u00ecnh b\u1ea5t c\u1ee9 \u0111i\u1ec1u g\u00ec trong ph\u1ea7n l\u1edbn tr\u01b0\u1eddng h\u1ee3p.<\/p>\n\n\n<h3 class=\"wp-block-heading\">JS API &#8211; c\u00e1c t\u00f9y ch\u1ecdn<\/h3>\n\n\n<p>C\u00e1c t\u00f9y ch\u1ecdn c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng t\u00f9y ch\u1ecdn c\u1ea5u h\u00ecnh to\u00e0n c\u1ee5c qua khai b\u00e1o b\u1eb1ng \u0111\u1ed1i t\u01b0\u1ee3ng c\u00f3 t\u00ean <em>lazySizesConfig<\/em>. \u0110\u1ed1i t\u01b0\u1ee3ng n\u00e0y ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc \u0111o\u1ea1n m\u00e3 c\u1ee7a lazysizes. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 v\u00ed d\u1ee5 c\u0103n b\u1ea3n:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>window.lazySizesConfig = window.lazySizesConfig || {};\n\/\/ s\u1eed d\u1ee5ng class .lazy thay v\u00ec class .lazyload\nwindow.lazySizesConfig.lazyClass = 'lazy';\n\/\/ s\u1eed d\u1ee5ng data-original thay v\u00ec data-src\nlazySizesConfig.srcAttr = 'data-original';\n\/\/trang \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 cho s\u1ef1 ki\u1ec7n onload\nlazySizesConfig.loadMode = 1;<\/code><\/pre>\n\n\n<p>L\u01b0u \u00fd nh\u1ecf: sau d\u1ea5u =, n\u1ebfu l\u00e0 k\u00fd t\u1ef1 th\u00ec b\u1ea1n \u0111\u1ec3 trong d\u1ea5u nh\u00e1y \u0111\u01a1n &#8221;, c\u00f2n n\u1ebfu l\u00e0 s\u1ed1 th\u00ec \u0111\u1ec3 nguy\u00ean, kh\u00f4ng th\u00eam g\u00ec c\u1ea3.<\/p>\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n s\u1eed d\u1ee5ng g\u00f3i module, l\u1eddi khuy\u00ean l\u00e0 thay \u0111\u1ed5i c\u00e1c t\u00f9y ch\u1ecdn tr\u1ef1c ti\u1ebfp sau khi importing module <em>lazysizes<\/em>:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>import lazySizes t\u1eeb 'lazysizes';\n\/\/ imports kh\u00e1c...\nlazySizes.cfg.lazyClass = 'lazy';<\/code><\/pre>\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 danh s\u00e1ch c\u00e1c t\u00f9y ch\u1ecdn:<\/p>\n\n\n<ul><li><em>lazySizesConfig.lazyClass<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>&#8220;lazyload&#8221;<\/em>): T\u1ea1o class cho t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed c\u1ea7n lazy load (c\u00e1i n\u00e0y ch\u1ec9 c\u00f3 th\u1ec3 t\u1ea1o cho m\u1ed9t <em>class<\/em>. Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n b\u1ed5 sung th\u00eam m\u1ed9t s\u1ed1 ph\u1ea7n t\u1eed kh\u00e1c, m\u00e0 \u0111ang kh\u00f4ng c\u00f3 \u0111\u1ecbnh ngh\u0129a class, \u0111\u01a1n gi\u1ea3n th\u00eam n\u00f3 v\u00e0o t\u1eebng JS: <em>$(&#8216;.lazy-others&#8217;).addClass(&#8216;lazyload&#8217;);<\/em>)<\/li><li><em>lazySizesConfig.preloadAfterLoad<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>false<\/em>): \u0110\u1ec3 quy\u1ebft \u0111\u1ecbnh vi\u1ec7c li\u1ec7u lazysizes c\u00f3 ph\u1ea3i t\u1ea3i t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed sau s\u1ef1 ki\u1ec7n window onload hay kh\u00f4ng. L\u01b0u \u00fd: lazySizes sau \u0111\u00f3 s\u1ebd ti\u1ebfp t\u1ee5c t\u1ea3i c\u00e1c \u1ea3nh kh\u00f4ng-trong-t\u1ea7m-nh\u00ecn (not-in-view) b\u00ean trong h\u00e0ng \u0111\u1ee3i lazy, v\u00ec th\u1ebf c\u00e1c t\u1ea3i xu\u1ed1ng kh\u00e1c sau onload kh\u00f4ng b\u1ecb ch\u1eb7n.<\/li><li><em>lazySizesConfig.preloadClass<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>&#8220;lazypreload&#8221;<\/em>): T\u1ea1o class cho c\u00e1c ph\u1ea7n t\u1eed  lazy pre-loaded sau khi onload. C\u00e1c ph\u1ea7n t\u1eed n\u00e0y s\u1ebd v\u1eabn \u0111\u01b0\u1ee3c preloaded, ngay c\u1ea3 khi t\u00f9y ch\u1ecdn <em>preloadAfterLoad<\/em> \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp l\u00e0 <em>false<\/em>. L\u01b0u \u00fd: <em>class<\/em> n\u00e0y c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp linh ho\u1ea1t (<em>$currentSlide.next().find(&#8216;.lazyload&#8217;).addClass(&#8216;lazypreload&#8217;);<\/em>).<\/li><li><em>lazySizesConfig.loadingClass<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>&#8220;lazyloading&#8221;<\/em>): \u0110\u00e2y l\u00e0 <em>class<\/em> s\u1ebd \u0111\u01b0\u1ee3c th\u00eam v\u00e0o ph\u1ea7n t\u1eed <em>img<\/em> s\u1edbm nh\u1ea5t c\u00f3 th\u1ec3 khi \u1ea3nh b\u1eaft \u0111\u1ea7u t\u1ea3i v\u1ec1. C\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 th\u00eam c\u00e1c hi\u1ec7u \u1ee9ng ki\u1ec3u unveil.<\/li><li><em>lazySizesConfig.loadedClass<\/em> (m\u1eb7c \u0111\u1ecbnh: &#8220;<em>lazyloaded<\/em>&#8220;): \u0110\u00e2y l\u00e0 class s\u1ebd \u0111\u01b0\u1ee3c th\u00eam v\u00e0o b\u1ea5t c\u1ee9 ph\u1ea7n t\u1eed n\u00e0o s\u1edbm nh\u1ea5t c\u00f3 th\u1ec3 khi \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea3i xong ho\u1eb7c khi \u1ea3nh \u0111i v\u00e0o t\u1ea7m nh\u00ecn. C\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 th\u00eam c\u00e1c hi\u1ec7u \u1ee9ng unveil ho\u1eb7c \u0111\u1ec3 \u00e1p d\u1ee5ng c\u00e1c style.<\/li><li><em>lazySizesConfig.expand<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>370-500<\/em>): T\u00f9y ch\u1ecdn <em>expand<\/em> m\u1edf r\u1ed9ng t\u00ednh to\u00e1n khung nh\u00ecn tr\u00ecnh duy\u1ec7t ra t\u1ea5t c\u1ea3 c\u00e1c h\u01b0\u1edbng, v\u00ec th\u1ebf c\u00e1c ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u1ea3i tr\u01b0\u1edbc khi n\u00f3 th\u1ef1c s\u1ef1 \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t. Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n d\u1ef1a tr\u00ean k\u00edch c\u1ee1 khung nh\u00ecn tr\u00ecnh duy\u1ec7t c\u1ee7a thi\u1ebft b\u1ecb. L\u01b0u \u00fd: Gi\u00e1 tr\u1ecb h\u1ee3p l\u00fd n\u1eb1m trong kho\u1ea3ng t\u1eeb <em>300<\/em> \u0111\u1ebfn <em>1000<\/em>, ph\u1ee5 thu\u1ed9c v\u00e0o t\u00f9y ch\u1ecdn <em>expFactor<\/em>. Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u00f3 nhi\u1ec1u \u1ea3nh nh\u1ecf ho\u1eb7c b\u1ea1n s\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/anh-lqip\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u1eabu LQIP<\/a> b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ec3 gi\u00e1 tr\u1ecb n\u00e0y nh\u1ecf \u0111i, trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u00f3 c\u00e1c \u1ea3nh k\u00edch c\u1ee1 l\u1edbn h\u00e3y thi\u1ebft l\u1eadp ch\u1ec9 s\u1ed1 n\u00e0y cao h\u01a1n. C\u0169ng c\u1ea7n ph\u1ea3i l\u01b0u \u00fd l\u00e0 lazySizes s\u1ebd linh \u0111\u1ed9ng thu nh\u1ecf gi\u00e1 tr\u1ecb n\u00e0y v\u1ec1 0 n\u1ebfu tr\u00ecnh duy\u1ec7t \u0111ang t\u1ea3i xu\u1ed1ng v\u00e0 m\u1edf r\u1ed9ng n\u00f3 n\u1ebfu tr\u00ecnh duy\u1ec7t \u0111ang \u1edf tr\u1ea1ng th\u00e1i ngh\u1ec9 ng\u01a1i v\u00e0 ng\u01b0\u1eddi d\u00f9ng \u0111ang kh\u00f4ng cu\u1ed9n chu\u1ed9t (b\u1eb1ng c\u00e1ch nh\u00e2n t\u00f9y ch\u1ecdn expand l\u00ean 1,5 (expFactor)). T\u00f9y ch\u1ecdn n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ghi \u0111\u00e8 b\u1eb1ng thu\u1ed9c t\u00ednh <em>[data-expand]<\/em>.<\/li><li><em>lazySizesConfig.minSize<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>40<\/em>): C\u00e1i n\u00e0y \u0111\u01b0\u1ee3c d\u00f9ng cho t\u00ednh n\u0103ng <em>data-sizes=&#8221;auto&#8221;<\/em>. \u0110\u00e2y l\u00e0 k\u00edch c\u1ee1 nh\u1ecf nh\u1ea5t c\u1ee7a \u1ea3nh \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u00ednh to\u00e1n thu\u1ed9c t\u00ednh <em>sizes<\/em>. Trong tr\u01b0\u1eddng h\u1ee3p n\u00f3 nh\u1ecf h\u01a1n gi\u00e1 tr\u1ecb <em>minSize<\/em>, \u0111o\u1ea1n m\u00e3 script s\u1ebd \u0111i qua to\u00e0n b\u1ed9 c\u00e2y DOM cho \u0111\u1ebfn khi n\u00f3 t\u00ecm \u0111\u01b0\u1ee3c ph\u1ea7n t\u1eed cha m\u00e0 c\u00f3 gi\u00e1 tr\u1ecb l\u1edbn h\u01a1n <em>minSize<\/em>.<\/li><li><em>lazySizesConfig.srcAttr<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>&#8220;data-src&#8221;<\/em>): \u0110\u00e2y l\u00e0 thu\u1ed9c t\u00ednh s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n th\u00e0nh<em> src<\/em><\/li><li><em>lazySizesConfig.srcsetAttr<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>&#8220;data-srcset&#8221;<\/em>): \u0110\u00e2y l\u00e0 thu\u1ed9c t\u00ednh s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n th\u00e0nh <em>srcset<\/em>.<\/li><li><em>lazySizesConfig.sizesAttr <\/em>(m\u1eb7c \u0111\u1ecbnh<em>: &#8220;data-sizes&#8221;<\/em>): \u0110\u00e2y l\u00e0 thu\u1ed9c t\u00ednh s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n th\u00e0nh <em>sizes<\/em>.<\/li><li><em>lazySizesConfig.customMedia<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>{}<\/em>): T\u00f9y ch\u1ecdn \u0111\u1ed1i t\u01b0\u1ee3ng customMedia l\u00e0 m\u1ed9t alias map cho c\u00e1c truy v\u1ea5n media kh\u00e1c nhau. N\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u00e1ch bi\u1ec7t\/t\u1eadp trung nhi\u1ec1u ch\u1ec9 \u0111\u1ecbnh truy v\u1ea5n tri\u1ec3n khai media (layout) c\u1ee7a b\u1ea1n t\u1eeb thu\u1ed9c t\u00ednh <em>source[media]<\/em> (n\u1ed9i dung\/c\u1ea5u tr\u00fac) b\u1eb1ng c\u00e1ch t\u1ea1o c\u00e1c nh\u00e3n truy v\u1ea5n media (xem th\u00eam <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/custommedia\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00f9y bi\u1ebfn m\u1edf r\u1ed9ng media<\/a>).<\/li><li><em>lazySizesConfig.loadHidden<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>true<\/em>): \u0110\u01b0\u1ee3c d\u00f9ng v\u00e0o vi\u1ec7c lazySizes c\u00f3 quy\u1ebft \u0111\u1ecbnh t\u1ea3i c\u00e1c ph\u1ea7n t\u1eed \u1ea9n hay kh\u00f4ng (c\u00e1c ph\u1ea7n t\u1eed c\u00f3 thu\u1ed9c t\u00ednh <em>visibility: hidden<\/em>). \u0110i\u1ec1u quan tr\u1ecdng c\u1ea7n ph\u1ea3i bi\u1ebft l\u00e0: lazySizes s\u1ebd t\u1ea3i c\u00e1c \u1ea3nh b\u1ecb \u1ea9n theo c\u00e1ch tr\u00ec ho\u00e3n. N\u1ebfu b\u1ea1n mu\u1ed1n ch\u00fang t\u1ea3i nhanh nh\u1ea5t c\u00f3 th\u1ec3, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <em>opacity: 0.001<\/em> nh\u01b0ng \u0111\u1eebng s\u1eed d\u1ee5ng <em>visibility: hidden<\/em> ho\u1eb7c <em>opacity: 0<\/em>.<\/li><li><em>lazySizesConfig.ricTimeout<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>0<\/em>): T\u00f9y ch\u1ecdn th\u1eddi gian ch\u1edd (timeout) \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho <em>requestIdleCallback<\/em>. Gi\u00e1 tr\u1ecb h\u1ee3p l\u00fd n\u1eb1m gi\u1eefa kho\u1ea3ng 0, 100 &#8211; 1000. Gi\u00e1 tr\u1ecb d\u01b0\u1edbi 50 s\u1ebd v\u00f4 hi\u1ec7u h\u00f3a t\u00ednh n\u0103ng <em>requestIdleCallback<\/em>.<\/li><li><em>lazySizesConfig.throttleDelay<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>125<\/em>): T\u00f9y ch\u1ecdn th\u1eddi gian ch\u1edd \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh t\u1ea5t c\u1ea3 c\u00e1c listeners. Gi\u00e1 tr\u1ecb h\u1ee3p l\u00fd n\u1eb1m trong kho\u1ea3ng 66 &#8211; 200.<\/li><\/ul>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nwindow.lazySizesConfig = window.lazySizesConfig || {};\nwindow.lazySizesConfig.customMedia = {\n    '--small': '(max-width: 480px)',\n    '--medium': '(max-width: 900px)',\n    '--large': '(max-width: 1400px)',\n};\n&lt;\/script>\n&lt;picture>\n\t&lt;!--&#91;if IE 9]>&lt;video style=\"display: none;>&lt;!&#91;endif]-->\n\t&lt;source\n\t\tdata-srcset=\"http:\/\/placehold.it\/500x600\/11e87f\/fff\"\n\t\tmedia=\"--small\" \/>\n\t&lt;source\n\t\tdata-srcset=\"http:\/\/placehold.it\/700x300\"\n\t\tmedia=\"--medium\" \/>\n\t&lt;source\n\t\tdata-srcset=\"http:\/\/placehold.it\/1400x600\/e8117f\/fff\"\n\t\tmedia=\"--large\" \/>\n\t&lt;source\n        data-srcset=\"http:\/\/placehold.it\/1800x900\/117fe8\/fff\" \/>\n    &lt;!--&#91;if IE 9]>&lt;\/video>&lt;!&#91;endif]-->\n    &lt;img\n        data-src=\"http:\/\/placehold.it\/1400x600\/e8117f\/fff\"\n        class=\"lazyload\"\n        alt=\"image with artdirection\" \/>\n&lt;\/picture><\/code><\/pre>\n\n\n<p>C\u00f3 l\u1ebd \u0111\u00e2y l\u00e0 ph\u1ea7n nh\u1ee9c \u0111\u1ea7u nh\u1ea5t trong chu\u1ed7i ba ph\u1ea7n gi\u1edbi thi\u1ec7u s\u1eed d\u1ee5ng lazySizes, v\u00e0 l\u00e0m cho nh\u1eefng ng\u01b0\u1eddi kh\u00f4ng th\u00e0nh th\u1ea1o m\u00e3 nh\u01b0 t\u00f4i (ng\u01b0\u1eddi d\u1ecbch) c\u1ea3m th\u1ea5y l\u00fang t\u00fang. T\u00f4i s\u1ebd kh\u1eafc ph\u1ee5c chuy\u1ec7n n\u00e0y b\u1eb1ng c\u00e1c \u0111o\u1ea1n m\u00e3 th\u1ef1c h\u00e0nh. D\u0129 nhi\u00ean kh\u00f4ng s\u1eed d\u1ee5ng c\u00e1c t\u00f9y ch\u1ecdn n\u00e0y b\u1ea1n v\u1eabn d\u00f9ng lazySizes \u0111\u01b0\u1ee3c 50-70% r\u1ed3i, nh\u01b0ng n\u1ebfu ai mu\u1ed1n t\u00f9y bi\u1ebfn s\u00e2u \u0111\u1ec3 t\u1ed1i \u01b0u nhi\u1ec1u nh\u1ea5t trong kh\u1ea3 n\u0103ng th\u00ec c\u00e1c t\u00f9y ch\u1ecdn n\u00e0y kh\u00f4ng th\u1ec3 kh\u00f4ng n\u1eafm r\u00f5.<\/p>\n\n\n<p>T\u00f4i s\u1ebd b\u1eaft \u0111\u1ea7u b\u1eb1ng c\u00e1c v\u00ed d\u1ee5 \u0111\u01a1n gi\u1ea3n tr\u01b0\u1edbc:<\/p>\n\n\n<ul><li>(1) \u0110\u1ed5i t\u00ean class c\u1ea7n lazy load \u1ea3nh<\/li><\/ul>\n\n\n<p>T\u00f4i \u0111\u1ed5i class \u1ea3nh c\u1ea7n lazy load th\u00e0nh lazykiencang b\u1eb1ng \u0111o\u1ea1n m\u00e3 \u0111\u1eb7t tr\u01b0\u1edbc lazysizes.js nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nwindow.lazySizesConfig = window.lazySizesConfig || {};\n\/\/ use .lazy instead of .lazyload\nwindow.lazySizesConfig.lazyClass = 'lazykiencang';\n&lt;\/script><\/code><\/pre>\n\n\n<p>Ti\u1ebfp theo t\u00f4i \u0111\u1eb7t class cho c\u00e1c \u1ea3nh c\u1ea7n lazy load b\u1eb1ng t\u00ean t\u01b0\u01a1ng \u1ee9ng:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;img class=\"lazykiencang\" alt=\"\u1ea3nh c\u00e1 \u0111\u1eb9p\" data-src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/anh-ca-dep.jpg\"><\/code><\/pre>\n\n\n<p>Trang m\u1eabu: <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-change-class.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-change-class.html<\/a><\/p>\n\n\n<p><strong>\u0110\u00e1nh gi\u00e1 v\u1ec1 t\u00ednh n\u0103ng n\u00e0y<\/strong>: \u0111\u00e2y l\u00e0 t\u00ednh n\u0103ng kh\u00f4ng quan tr\u1ecdng, t\u00f4i ngh\u0129 trong th\u1ef1c t\u1ebf n\u00f3 ch\u1ec9 \u0111\u01b0\u1ee3c d\u00f9ng khi m\u00e0 class m\u1eb7c \u0111\u1ecbnh lazyload \u0111\u00e3 b\u1ecb d\u00f9ng r\u1ed3i, ho\u1eb7c c\u00f3 l\u1ebd ph\u1ed5 bi\u1ebfn h\u01a1n l\u00e0 trong tr\u01b0\u1eddng h\u1ee3p ng\u01b0\u1eddi s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n mu\u1ed1n d\u00f9ng ri\u00eang t\u00ean class m\u00e0 h\u1ecd th\u1ea5y ti\u1ec7n d\u1ee5ng. Trong danh s\u00e1ch t\u00f9y ch\u1ecdn c\u00f2n c\u00f3 nh\u1eefng c\u00e1i c\u00f3 t\u00ednh n\u0103ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 d\u00f9ng v\u00e0o vi\u1ec7c \u0111\u1ed5i t\u00ean class ho\u1eb7c thu\u1ed9c t\u00ednh, ch\u1eb3ng h\u1ea1n nh\u01b0 <em>lazySizesConfig.loadingClass<\/em>; <em>lazySizesConfig.loadedClass<\/em>; <em>lazySizesConfig.srcAttr<\/em>; <em>lazySizesConfig.srcsetAttr<\/em> v\u00e0 <em>lazySizesConfig.sizesAttr<\/em><\/p>\n\n\n<p>&#8212;<\/p>\n\n\n<ul><li>(2) V\u00ed d\u1ee5 ti\u1ebfp theo l\u00e0 can thi\u1ec7p v\u00e0o t\u00f9y ch\u1ecdn expand, c\u00e1i c\u00f3 ti\u1ec1m n\u0103ng c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng r\u1ea5t l\u1edbn th\u00f4ng qua vi\u1ec7c t\u1ea3i tr\u01b0\u1edbc c\u00e1c \u1ea3nh khi n\u00f3 chu\u1ea9n b\u1ecb \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t v\u1edbi ng\u01b0\u1ee1ng m\u00e0 nh\u00e0 ph\u00e1t tri\u1ec3n th\u01b0 vi\u1ec7n lazysizes cho l\u00e0 h\u1ee3p l\u00fd l\u00e0 t\u1eeb 300 &#8211; 1000. Tuy nhi\u00ean t\u00f4i s\u1ebd th\u1eed c\u00e1c t\u00f9y ch\u1ecdn c\u1ef1c ti\u1ec3u v\u00e0 c\u1ef1c \u0111\u1ea1i xem c\u00f3 s\u1ef1 kh\u00e1c bi\u1ec7t n\u00e0o hay kh\u00f4ng.<\/li><\/ul>\n\n\n<p>\u0110\u1ea7u ti\u00ean l\u00e0 expand 100 (t\u00f4i \u0111\u00e3 ghi ch\u00fa \u1edf ph\u1ea7n l\u01b0u \u00fd nh\u1ecf, nh\u01b0ng v\u1eabn nh\u1eafc l\u1ea1i \u1edf \u0111\u00e2y: b\u1ea1n kh\u00f4ng \u0111\u01b0\u1ee3c \u0111\u1ec3 d\u1ea5u &#8221; trong gi\u00e1 tr\u1ecb ki\u1ec3u nh\u01b0 &#8216;100&#8217;, n\u1ebfu kh\u00f4ng n\u00f3 s\u1ebd v\u00f4 hi\u1ec7u h\u00f3a lazy load v\u00e0 t\u1ea3i v\u1ec1 t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh): <\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nwindow.lazySizesConfig = window.lazySizesConfig || {};\n\/\/ use expand 100\nwindow.lazySizesConfig.expand = 100;\n&lt;\/script><\/code><\/pre>\n\n\n<p>Trang m\u1eabu: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-expand100.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-expand100.html<\/a><\/p>\n\n\n<p>L\u00e0m sao b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c m\u00e3 ch\u1ea1y c\u00f3 \u0111\u00fang hay kh\u00f4ng v\u00e0 n\u00f3 kh\u00e1c v\u1edbi m\u1eb7c \u0111\u1ecbnh th\u1ebf n\u00e0o?<\/p>\n\n\n<p>\u0110\u01a1n gi\u1ea3n l\u00e0 ch\u00fang ta ph\u1ea3i th\u1eed trong th\u1ef1c t\u1ebf th\u00f4i, h\u00e3y xem c\u00e1ch trang t\u1ea3i khi t\u00f4i \u0111\u1ec3 l\u00e0 expand 100 (v\u1edbi \u0111i\u1ec1u ki\u1ec7n k\u1ebft n\u1ed1i: c\u1ed9t wifi \u1edf xa):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/lazysizes-expand-100-1024x520.png\" alt=\"\" class=\"wp-image-15875\"\/><\/figure><\/div>\n\n\n<p>Expand 100 (v\u1edbi \u0111i\u1ec1u ki\u1ec7n k\u1ebft n\u1ed1i: c\u1ed9t wifi \u1edf g\u1ea7n):<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/lazysizes-expand-100-wifi-gan-1024x527.png\" alt=\"\" class=\"wp-image-15876\"\/><\/figure>\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y v\u1edbi expand 100 ch\u1ec9 c\u00f3 3 \u1ea3nh t\u1ea3i v\u1ec1 (wifi g\u1ea7n), trong \u0111\u00f3 t\u00f4i ch\u1ee7 \u0111\u1ed9ng kh\u00f4ng lazy load \u1ea3nh s\u1ed1 m\u1ed9t v\u00ec n\u00f3 thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (t\u1ea5t c\u1ea3 <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> \u0111\u1ec1u kh\u00f4ng n\u00ean lazy load), \u0111i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 ngo\u1ea1i tr\u1eeb hai \u1ea3nh ti\u1ebfp theo, t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh c\u00f3 class lazyload v\u1edbi expand 100 \u0111\u1ec1u kh\u00f4ng t\u1ea3i l\u01b0\u1eddi v\u1edbi \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh 500 x 500 m\u00e0 t\u00f4i demo \u1edf tr\u00ean.<\/p>\n\n\n<p>P\/S: \u0111\u1ecdc \u0111\u1ebfn \u0111\u00e2y c\u00f3 th\u1ec3 b\u1ea1n s\u1ebd th\u1eafc m\u1eafc wifi \u1edf g\u1ea7n hay \u1edf xa t\u1ea1i sao l\u1ea1i t\u1ea1o ra s\u1ed1 l\u01b0\u1ee3ng \u1ea3nh t\u1ea3i v\u1ec1 kh\u00e1c nhau. Wifi \u1edf xa, t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i, l\u1eabn \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh \u0111\u1ec1u k\u00e9m h\u01a1n, do v\u1eady v\u1ec1 l\u00fd thuy\u1ebft \u0111\u1ec3 t\u1ed1i \u01b0u cho lazy load th\u00ec n\u00f3 n\u00ean t\u1ea3i nhi\u1ec1u \u1ea3nh h\u01a1n so v\u1edbi wifi \u1edf g\u1ea7n. Nh\u01b0ng \u1edf tr\u00ean t\u00f4i cho l\u00e0 tr\u00f9ng h\u1ee3p th\u00f4i, v\u00ec lazysizes nh\u01b0 t\u00f4i bi\u1ebft ch\u01b0a t\u00edch h\u1ee3p ti\u1ec7n \u00edch ki\u1ec3m tra t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i (xem th\u00eam: <a href=\"https:\/\/kiencang.net\/tai-thich-ung\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ea3i th\u00edch \u1ee9ng<\/a>). V\u1eady \u0111\u00e2u l\u00e0 l\u00fd do? T\u00f4i \u0111o\u00e1n l\u00e0 do khi \u1edf k\u1ebft n\u1ed1i ch\u1eadm, k\u1ebft xu\u1ea5t h\u00ecnh \u1ea3nh ra m\u00e0n h\u00ecnh s\u1ebd ch\u1eadm h\u01a1n, k\u1ebft qu\u1ea3 l\u00e0 c\u00e1c \u0111o\u1ea1n m\u00e3 \u1ea3nh s\u1edbm xu\u1ea5t hi\u1ec7n trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t h\u01a1n do c\u00e1c \u1ea3nh ch\u01b0a k\u1ecbp k\u1ebft xu\u1ea5t \u0111\u1ec3 \u1ea9n n\u00f3 xu\u1ed1ng b\u00ean d\u01b0\u1edbi, trong khi tr\u00ean k\u1ebft n\u1ed1i nhanh th\u00ec ng\u01b0\u1ee3c l\u1ea1i.<\/p>\n\n\n<p>C\u00e2u h\u1ecfi: t\u1ea1i sao trong ph\u1ea7n v\u1ec1 expand, t\u00e1c gi\u1ea3 l\u1ea1i khuy\u00ean ch\u00fang ta n\u1ebfu d\u00f9ng <a href=\"https:\/\/kiencang.net\/anh-lqip\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea3nh LQIP<\/a> th\u00ec c\u00f3 th\u1ec3 \u0111\u1ec3 expand th\u1ea5p? <\/p>\n\n\n<p>B\u1ea1n th\u1eed ngh\u0129 xem?<\/p>\n\n\n<p>1, 2, 3&#8230;<\/p>\n\n\n<p>L\u00fd do l\u00e0 v\u00ec \u0111\u00e3 c\u00f3 \u1ea3nh LQIP gi\u1eef ch\u1ed7 cho \u1ea3nh th\u1ef1c r\u1ed3i, n\u00ean \u1ea3nh th\u1ef1c c\u00f3 t\u1ea3i ch\u1eadm m\u1ed9t ch\u00fat c\u0169ng kh\u00f4ng \u1ea3nh h\u01b0\u1edfng nhi\u1ec1u \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. Ngo\u00e0i ra expand c\u00f3 th\u1ea5p th\u00ec qu\u00e1 tr\u00ecnh chuy\u1ec3n ti\u1ebfp t\u1eeb LQIP sang \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao m\u1edbi d\u1ec5 quan s\u00e1t:<\/p>\n\n\n<p>Trang demo LQIP (transition 400ms) + expand 100 : <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-lqip-expand100.html\">https:\/\/static.kiencang.net\/2020\/lazysizes-lqip-expand100.html<\/a><\/p>\n\n\n<p>\u1ea2nh nh\u1ecf c\u0169ng c\u00f3 th\u1ec3 \u0111\u1ec3 gi\u00e1 tr\u1ecb expand th\u1ea5p, v\u00ec \u1ea3nh nh\u1ecf th\u00ec dung l\u01b0\u1ee3ng c\u0169ng nh\u1ecf v\u00e0 n\u00f3 \u00edt khi b\u1ecb tr\u1ec5 h\u01a1n so v\u1edbi c\u00e1c \u1ea3nh l\u1edbn.<\/p>\n\n\n<p>OK, \u0111\u00e2y l\u00e0 l\u00fac b\u1ea1n chuy\u1ec3n s\u1ef1 t\u1eadp trung sang v\u00ed d\u1ee5 ti\u1ebfp.<\/p>\n\n\n<p>&#8212;<\/p>\n\n\n<p>Ti\u1ebfp theo l\u00e0 expand 1000:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nwindow.lazySizesConfig = window.lazySizesConfig || {};\n\/\/ use expand 1000\nwindow.lazySizesConfig.expand = 1000;\n&lt;\/script><\/code><\/pre>\n\n\n<p>Trang m\u1eabu: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-expand1000.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-expand1000.html<\/a><\/p>\n\n\n<p>K\u1ebft qu\u1ea3 t\u1ea3i th\u1ef1c t\u1ebf (wifi g\u1ea7n):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/lazysizes-expand-1000-wifi-gan-1024x521.png\" alt=\"expand 1000 wifi g\u1ea7n\" class=\"wp-image-15877\"\/><\/figure><\/div>\n\n\n<p>Khi expand \u0111\u01b0\u01a1c m\u1edf r\u1ed9ng l\u00ean 1000 th\u00ec c\u00f3 \u0111\u1ebfn 14 \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea3i ch\u1ee9 kh\u00f4ng ch\u1ec9 3 \u1ea3nh nh\u01b0 khi \u0111\u1ec3 expand l\u00e0 100. \u0110i\u1ec1u n\u00e0y kh\u1edbp v\u1edbi d\u1ef1 \u0111o\u00e1n c\u1ee7a ch\u00fang ta.<\/p>\n\n\n<p>&#8212;<\/p>\n\n\n<p>Cu\u1ed1i c\u00f9ng expand 10000 (t\u00f4i d\u1ef1 \u0111o\u00e1n l\u00e0 t\u1ea5t c\u1ea3 \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1):<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nwindow.lazySizesConfig = window.lazySizesConfig || {};\n\/\/ use expand 10000\nwindow.lazySizesConfig.expand = 10000;\n&lt;\/script><\/code><\/pre>\n\n\n<p>Trang m\u1eabu: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-expand10000.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-expand10000.html<\/a><\/p>\n\n\n<p>K\u1ebft qu\u1ea3 t\u1ea3i v\u1ec1 (wifi g\u1ea7n):<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/lazysizes-expand-10000-wifi-gan-1024x529.png\" alt=\"lazysizes expand 10000 wifi g\u1ea7n\" class=\"wp-image-15878\"\/><\/figure>\n\n\n<p>\u0110\u00fang nh\u01b0 d\u1ef1 \u0111o\u00e1n khi expand m\u1edf r\u1ed9ng \u0111\u1ebfn 10 ng\u00e0n, t\u1ea5t c\u1ea3 \u1ea3nh lazy load s\u1ebd t\u1ea3i ngay l\u00fac ban \u0111\u1ea7u (trang demo c\u00f3 31 \u1ea3nh v\u1edbi \u0111\u1ed9 d\u00e0i kho\u1ea3ng 10 ng\u00e0n pixel).<\/p>\n\n\n<p><strong>\u0110\u00e1nh gi\u00e1 v\u1ec1 t\u00ednh n\u0103ng n\u00e0y<\/strong>: t\u00f4i cho r\u1eb1ng expand l\u00e0 t\u00ednh n\u0103ng quan tr\u1ecdng, vi\u1ec7c m\u1edf r\u1ed9ng khung nh\u00ecn tr\u00ecnh duy\u1ec7t \u0111\u1ec3 t\u1ea3i tr\u01b0\u1edbc ch\u1eafc ch\u1eafn \u0111em \u0111\u1ebfn t\u00ednh kh\u1ea3 d\u1ee5ng cao h\u01a1n tr\u00ean c\u00e1c thi\u1ebft b\u1ecb c\u00f3 k\u1ebft n\u1ed1i ch\u1eadm. B\u1edfi v\u00ec tr\u00ean thi\u1ebft b\u1ecb c\u00f3 k\u1ebft n\u1ed1i nhanh, ph\u1ea7n c\u1ee9ng t\u1ed1t, expand c\u00f3 gi\u00e1 tr\u1ecb nh\u1ecf kh\u00f4ng \u1ea3nh h\u01b0\u1edfng g\u00ec c\u1ea3, trang v\u1eabn s\u1ebd t\u1ea3i t\u1ed1t, kh\u00f4ng g\u00e2y hi\u1ec7n t\u01b0\u1ee3ng ch\u1eadm tr\u1ec5. Nh\u01b0ng tr\u00ean k\u1ebft n\u1ed1i ch\u1eadm, vi\u1ec7c m\u1edf r\u1ed9ng expand s\u1ebd tr\u00e1nh \u0111\u01b0\u1ee3c r\u1ee7i ro \u1ea3nh kh\u00f4ng k\u1ecbp t\u1ea3i \u1ea3nh, v\u00ec n\u00f3 c\u00f3 th\u1eddi gian t\u1ea3i v\u1ec1 d\u00e0i h\u01a1n. \u0110\u00e2y l\u00e0 l\u00fd do m\u00e0 m\u1ed9t s\u1ed1 plugin lazy load cho WordPress t\u00edch h\u1ee3p t\u00ednh n\u0103ng t\u01b0\u01a1ng t\u1ef1, ch\u1eb3ng h\u1ea1n nh\u01b0 <a href=\"https:\/\/kiencang.net\/plugin-flying-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flying Images<\/a>, h\u1ecd th\u1eadm ch\u00ed c\u00f3 t\u00f9y ch\u1ecdn cho ph\u00e9p m\u1edf r\u1ed9ng \u0111\u1ebfn 3000px t\u00ednh t\u1eeb \u0111\u00e1y thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/tai-truoc-anh.png\" alt=\"t\u1ea3i tr\u01b0\u1edbc \u1ea3nh khi n\u00f3 \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t\" class=\"wp-image-15885\"\/><\/figure><\/div>\n\n\n<ul><li>(3) V\u00ed d\u1ee5 n\u00e0y s\u1ebd can thi\u1ec7p v\u00e0o t\u00f9y ch\u1ecdn lazySizesConfig.preloadAfterLoad. N\u1ebfu \u0111\u00fang nh\u01b0 t\u00f4i ngh\u0129 th\u00ec trong nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p \u0111\u00e2y l\u00e0 t\u00f9y ch\u1ecdn m\u00e0 b\u1ea1n n\u00ean \u0111\u1ec3 <em>true<\/em>, \u0111\u1ec3 ngay khi tr\u00ecnh duy\u1ec7t r\u1ea3nh r\u1ed7i, c\u00e1c \u1ea3nh lazy load s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 v\u00e0 d\u00f9ng \u0111\u01b0\u1ee3c lu\u00f4n khi c\u1ea7n thi\u1ebft. Tuy nhi\u00ean \u0111\u00e2y ch\u1ec9 l\u00e0 d\u1ef1 \u0111o\u00e1n, t\u00f4i s\u1ebd th\u1eed trong th\u1ef1c t\u1ebf xem t\u00ecnh h\u00ecnh th\u1ebf n\u00e0o.<\/li><\/ul>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nwindow.lazySizesConfig = window.lazySizesConfig || {};\n\/\/ preload sau khi t\u1ea3i\nlazySizesConfig.preloadAfterLoad = 'true';\n&lt;\/script><\/code><\/pre>\n\n\n<p>Trang m\u1eabu: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-preload-after-load.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-preload-after-load.html<\/a><\/p>\n\n\n<p>Qu\u1ea3 th\u1ef1c gi\u1ed1ng nh\u01b0 t\u00f4i \u0111o\u00e1n, sau khi t\u1ea3i m\u1ed9t s\u1ed1 \u1ea3nh \u0111\u1ee7 \u0111i\u1ec1u ki\u1ec7n k\u00edch ho\u1ea1t, n\u1ebfu th\u1ea5y tr\u00ecnh duy\u1ec7t b\u1eadn, c\u00e1c \u1ea3nh lazy load c\u00f2n l\u1ea1i s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c t\u1ea3i, c\u00f2n n\u1ebfu tr\u00ecnh duy\u1ec7t r\u1ea3nh, lazysizes s\u1ebd t\u1ea3i t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh t\u1ea3i l\u01b0\u1eddi c\u00f2n l\u1ea1i m\u00e0 kh\u00f4ng ph\u1ea3i \u0111\u1ee3i ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n chu\u1ed9t \u0111\u1ebfn g\u1ea7n. \u0110\u1ec3 m\u00f4 t\u1ea3 t\u00ednh n\u0103ng n\u00e0y, t\u00f4i \u0111\u00e3 quay video m\u00e0n h\u00ecnh. Trong \u0111\u00f3 b\u1ea1n s\u1ebd th\u1ea5y khi t\u00f4i di chuy\u1ec3n chu\u1ed9t (bi\u1ec3u t\u01b0\u1ee3ng h\u00ecnh tr\u00f2n di chuy\u1ec3n, t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi tr\u00ecnh duy\u1ec7t b\u1eadn r\u1ed9n) th\u00ec lazysizes ch\u1ec9 t\u1ea3i c\u00e1c \u1ea3nh theo m\u1eb7c \u0111\u1ecbnh v\u1ec1 (t\u1eeb l\u00fac b\u1eaft \u0111\u1ea7u \u0111\u1ebfn gi\u00e2y 24 l\u00e0 trong qu\u00e1 tr\u00ecnh t\u1ea3i, t\u1eeb gi\u00e2y 24 \u0111\u1ebfn gi\u00e2y 30 qu\u00e1 tr\u00ecnh t\u1ea3i \u0111\u00e3 xong nh\u01b0ng t\u00f4i v\u1eabn di chuy\u1ec3n chu\u1ed9t n\u00ean kh\u00f4ng c\u00f3 preload), c\u00f2n n\u1ebfu t\u00f4i d\u1eebng cu\u1ed9n tr\u1ecf chu\u1ed9t (h\u00ecnh tr\u00f2n \u0111\u1ee9ng y\u00ean, t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi tr\u00ecnh duy\u1ec7t r\u1ea3nh r\u1ed7i, t\u1eeb gi\u00e2y 30 tr\u1edf \u0111i) th\u00ec lazysizes s\u1ebd t\u1ea3i to\u00e0n b\u1ed9 \u1ea3nh c\u00f2n l\u1ea1i v\u1ec1:<\/p>\n\n\n<figure><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/ofDpgtJ5peU\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe><\/figure>\n\n\n<p><strong>\u0110\u00e1nh gi\u00e1 v\u1ec1 t\u00ednh n\u0103ng n\u00e0y<\/strong>: ch\u1eafc ch\u1eafn c\u1ea7n nhi\u1ec1u tr\u1ea3i nghi\u1ec7m h\u01a1n \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 ch\u00ednh x\u00e1c, v\u00ec t\u00f4i c\u00f2n m\u1ed9t s\u1ed1 ho\u00e0i nghi. Tuy nhi\u00ean d\u1ef1a tr\u00ean logic th\u00ec t\u00f4i \u0111\u00e1nh gi\u00e1 cao t\u00ednh n\u0103ng n\u00e0y, th\u1eadm ch\u00ed l\u00e0 r\u1ea5t quan tr\u1ecdng. Khi trang t\u1ea3i v\u00e0 xu\u1ea5t \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh \u0111\u1ea7u ti\u00ean, ng\u01b0\u1eddi d\u00f9ng th\u01b0\u1eddng cu\u1ed9n chu\u1ed9t (m\u00e1y b\u00e0n) ho\u1eb7c vu\u1ed1t m\u00e0n h\u00ecnh (di \u0111\u1ed9ng) \u0111\u1ec3 b\u1eaft \u0111\u1ea7u ti\u00eau th\u1ee5 n\u1ed9i dung, v\u00e0 c\u00e1c \u1ea3nh c\u1ea7n lazy load ch\u01b0a \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t s\u1ebd kh\u00f4ng t\u1ea3i v\u1ec1. V\u00e0 khi ng\u01b0\u1eddi d\u00f9ng \u0111\u1ebfn ph\u1ea7n n\u1ed9i dung h\u1ea5p d\u1eabn, d\u1eebng l\u1ea1i \u0111\u1ec3 \u0111\u1ecdc ho\u1eb7c xem, tr\u00ecnh duy\u1ec7t trong tr\u1ea1ng th\u00e1i r\u1ea3nh v\u00e0 lazysizes s\u1ebd t\u1ea3i c\u00e1c \u1ea3nh c\u00f2n l\u1ea1i nhanh nh\u1ea5t c\u00f3 th\u1ec3. Ngh\u0129a l\u00e0 \u0111\u00e2y l\u00e0 t\u00ednh hu\u1ed1ng m\u00e0 \u1ea3nh \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t t\u1ea3i d\u1ef1a tr\u00ean vi\u1ec7c tr\u00ecnh duy\u1ec7t c\u00f3 r\u1ea3nh r\u1ed7i hay kh\u00f4ng, ch\u1ee9 kh\u00f4ng \u0111\u01a1n thu\u1ea7n ch\u1ec9 d\u1ef1a v\u00e0o kho\u1ea3ng c\u00e1ch gi\u1eefa \u1ea3nh v\u00e0 viewport n\u1eefa, \u0111\u00e2y l\u00e0 c\u00e1ch h\u1ea1n ch\u1ebf t\u1ed1i \u0111a tr\u1ea1ng th\u00e1i tr\u1ec5 (\u1ea3nh kh\u00f4ng k\u1ecbp t\u1ea3i). D\u0129 nhi\u00ean \u0111\u00e2y kh\u00f4ng ph\u1ea3i l\u00e0 c\u00e1ch ti\u1ebft ki\u1ec7m b\u0103ng th\u00f4ng. Lazy load th\u00f4ng th\u01b0\u1eddng s\u1ebd ti\u1ebft ki\u1ec7m b\u0103ng th\u00f4ng kh\u00f4ng nhi\u1ec1u th\u00ec \u00edt, v\u00ec c\u00f3 m\u1ed9t t\u1ef7 l\u1ec7 l\u1edbn ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng cu\u1ed9n chu\u1ed9t s\u00e2u xu\u1ed1ng d\u01b0\u1edbi trang, v\u00e0 \u1ea3nh \u1edf nh\u1eefng khu v\u1ef1c \u0111\u00f3 s\u1ebd kh\u00f4ng t\u1ea3i. Nh\u01b0ng ki\u1ec3u lazy load n\u00e0y s\u1ebd t\u1eadn d\u1ee5ng m\u1ecdi l\u00fac tr\u00ecnh duy\u1ec7t r\u1ea3nh \u0111\u1ec3 t\u1ea3i \u1ea3nh v\u1ec1, v\u00e0 trong h\u1ea7u h\u1ebft tr\u01b0\u1eddng h\u1ee3p \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 h\u1ebft trong v\u00f2ng v\u00e0i gi\u00e2y khi ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng thao t\u00e1c g\u00ec (tr\u1eeb khi h\u1ecd \u0111\u00f3ng tr\u00ecnh duy\u1ec7t r\u1ea5t nhanh khi v\u1eeba m\u1edbi v\u00e0o trang). C\u00f3 l\u1ebd c\u00e1ch n\u00e0y kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c trang c\u00f3 l\u01b0u l\u01b0\u1ee3ng truy c\u1eadp l\u1edbn, v\u00e0 gi\u00e1 tr\u1ecb visitor kh\u00f4ng cao, v\u00ec l\u00fac \u1ea5y b\u0103ng th\u00f4ng s\u1ebd l\u00e0 v\u1ea5n \u0111\u1ec1. Ng\u01b0\u1ee3c l\u1ea1i c\u00e1c trang \u0111\u1eb7t tr\u1ecdng t\u00e2m cao nh\u1ea5t v\u00e0o kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb n\u1ed9i dung cho ng\u01b0\u1eddi d\u00f9ng r\u1ea5t c\u00f3 th\u1ec3 n\u00ean \u00e1p d\u1ee5ng.<\/p>\n\n\n<p>&#8212;<\/p>\n\n\n<ul><li>(4) class lazypreload, t\u01b0\u01a1ng t\u1ef1 nh\u01b0 t\u00ednh n\u0103ng preloadAfterLoad, nh\u01b0ng n\u1ebfu preloadAfterLoad t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn to\u00e0n b\u1ed9 \u1ea3nh th\u00ec lazypreload ch\u1ec9 t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn \u1ea3nh n\u00e0o c\u00f3 g\u1eafn class n\u00e0y. Gi\u1edd t\u00f4i s\u1ebd th\u1eed n\u00f3 xem th\u1ebf n\u00e0o, c\u0169ng ch\u1eb3ng c\u1ea7n ph\u1ea3i \u0111\u1ed5i t\u00ean class t\u1ea3i tr\u01b0\u1edbc \u1ea3nh n\u00e0y l\u00e0m g\u00ec do v\u1eady b\u1ea1n s\u1ebd kh\u00f4ng ph\u1ea3i th\u00eam \u0111o\u1ea1n m\u00e3 <em>window.lazySizesConfig<\/em>. C\u00e1ch th\u1eed l\u00e0 t\u00f4i s\u1ebd \u0111\u1eb7t class n\u00e0y v\u00e0o m\u1ea5y \u1ea3nh cu\u1ed1i trong demo, xem l\u00fac tr\u00ecnh duy\u1ec7t r\u1ea3nh c\u00e1c \u1ea3nh n\u00e0y c\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 kh\u00f4ng (lazy load m\u1eb7c \u0111\u1ecbnh th\u00ec n\u00f3 kh\u00f4ng v\u00ec v\u1eabn ch\u01b0a \u0111\u1ee7 \u0111i\u1ec1u ki\u1ec7n k\u00edch ho\u1ea1t \/ \u0111\u1ea1t \u0111\u1ebfn ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch so v\u1edbi viewport).<\/li><\/ul>\n\n\n<p>M\u00e3 m\u1eabu: <\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;img width=\"640\" data-src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/anh-nang.jpg\" class=\"lazyload lazypreload\" \/><\/code><\/pre>\n\n\n<p>Trang m\u1eabu: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-class-lazypreload.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-class-lazypreload.html<\/a><\/p>\n\n\n<p>Khi b\u1ea1n d\u00f9ng c\u00f4ng c\u1ee5 Chrome DevTools \u0111\u1ec3 ki\u1ec3m tra, b\u1ea1n s\u1ebd th\u1ea5y 3 \u1ea3nh cu\u1ed1i g\u1eafn class <em>lazypreload<\/em> \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 m\u1eb7c d\u00f9 n\u00f3 \u1edf v\u1ecb tr\u00ed cu\u1ed1i c\u00f9ng tr\u00ean trang:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/3-anh-cuoi-tai-ve.png\" alt=\"\u1ea3nh c\u00f3 class lazypreload \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 s\u01a1m\" class=\"wp-image-15887\"\/><\/figure><\/div>\n\n\n<p><strong>\u0110\u00e1nh gi\u00e1 v\u1ec1 t\u00ednh n\u0103ng n\u00e0y<\/strong>: l\u00e0 m\u1ed9t t\u00ednh n\u0103ng hay, v\u00ec c\u00f3 th\u1ec3 b\u1ea1n ch\u1ec9 mu\u1ed1n preload m\u1ed9t s\u1ed1 \u1ea3nh th\u00f4i, ch\u1ee9 kh\u00f4ng mu\u1ed1n s\u1eed d\u1ee5ng t\u00ednh n\u0103ng <em>preloadAfterLoad<\/em> \u0111\u1ec3 t\u1ea3i v\u1ec1 t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh khi tr\u00ecnh duy\u1ec7t r\u1ea3nh r\u1ed7i.<\/p>\n\n\n<p>&#8212;<\/p>\n\n\n<p>Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u00e1c t\u00f9y ch\u1ecdn c\u00f2n l\u1ea1i:<\/p>\n\n\n<ul><li><em>lazySizesConfig.expFactor<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>1.5<\/em>): expFactor \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u00ednh to\u00e1n &#8220;m\u1edf r\u1ed9ng preload&#8221;, b\u1eb1ng c\u00e1ch nh\u00e2n gi\u00e1 tr\u1ecb <em>expand<\/em> th\u00f4ng th\u01b0\u1eddng v\u1edbi <em>expFactor<\/em>, c\u00e1i \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 preload c\u00e1c t\u00e0i nguy\u00ean khi tr\u00ecnh duy\u1ec7t \u1edf tr\u1ea1ng th\u00e1i ngh\u1ec9 ng\u01a1i (idling, ngh\u0129a l\u00e0 kh\u00f4ng c\u00f3 l\u01b0u l\u01b0\u1ee3ng truy c\u1eadp m\u1ea1ng quan tr\u1ecdng v\u00e0 kh\u00f4ng cu\u1ed9n chu\u1ed9t). Gi\u00e1 tr\u1ecb h\u1ee3p l\u00fd n\u1eb1m gi\u1eefa kho\u1ea3ng <em>1,5<\/em> v\u00e0 <em>4<\/em>, t\u00f9y thu\u1ed9c v\u00e0o t\u00f9y ch\u1ecdn <em>expand<\/em>. B\u1ea1n s\u1ebd hi\u1ec3u r\u00f5 h\u01a1n \u00fd ngh\u0129a c\u1ee7a n\u00f3 khi \u0111\u1ecdc \u0111\u1ebfn ph\u1ea7n loadMode.<\/li><li><em>lazySizesConfig.hFac<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>0.8<\/em>): hFac (y\u1ebfu t\u1ed1 b\u1ec1 ngang) s\u1eeda \u0111\u1ed5i m\u1edf r\u1ed9ng chi\u1ec1u ngang b\u1eb1ng c\u00e1ch nh\u00e2n gi\u00e1 tr\u1ecb expand v\u1edbi gi\u00e1 tr\u1ecb hFac. Tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng trong th\u1ef1c t\u1ebf: trong tr\u01b0\u1eddng h\u1ee3p b\u0103ng chuy\u1ec1n \u1ea3nh (carousels) b\u1ea1n th\u01b0\u1eddng c\u00f3 mong mu\u1ed1n m\u1edf r\u1ed9ng chi\u1ec1u ngang h\u1eb9p, h\u01a1n l\u00e0 t\u00f9y ch\u1ecdn m\u1edf r\u1ed9ng chi\u1ec1u cao. Gi\u00e1 tr\u1ecb h\u1ee3p l\u00fd n\u1eb1m gi\u1eefa 0,4 &#8211; 1. Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n kh\u00f4ng ch\u1eafc ch\u1eafn v\u1ec1 website cu\u1ed9n theo chi\u1ec1u ngang, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb 1 &#8211; 1,5.<\/li><li><em>lazySizesConfig.loadMode<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>2<\/em>): loadMode c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 h\u1ea1n ch\u1ebf c\u00e1c ch\u1ebf \u0111\u1ed9 t\u1ea3i cho ph\u00e9p. C\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 bao g\u1ed3m 0 = kh\u00f4ng t\u1ea3i b\u1ea5t c\u1ee9 th\u1ee9 g\u00ec, 1 = ch\u1ec9 t\u1ea3i c\u00e1c ph\u1ea7n t\u1eed n\u1eb1m trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t, 2 = t\u1ea3i c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed n\u1eb1m g\u1ea7n khung nh\u00ecn tr\u00ecnh duy\u1ec7t (v\u1edbi t\u00f9y ch\u1ecdn expand) v\u00e0 3 = t\u1ea3i c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed n\u1eb1m \u1edf xa (v\u1edbi ng\u01b0\u1ee1ng t\u00f9y ch\u1ecdn expand * expFactor). Gi\u00e1 tr\u1ecb n\u00e0y \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng thi\u1ebft l\u1eadp l\u00e0 3 sau onload. Thay \u0111\u1ed5i gi\u00e1 tr\u1ecb n\u00e0y th\u00e0nh 1 n\u1ebfu b\u1ea1n \u0111\u00e3 t\u1ed1i \u01b0u h\u00f3a cho s\u1ef1 ki\u1ec7n onload ho\u1eb7c thay \u0111\u1ed5i n\u00f3 th\u00e0nh 3 n\u1ebfu s\u1ef1 ki\u1ec7n onload c\u1ee7a b\u1ea1n \u0111\u00e3 b\u1ecb tr\u00ec ho\u00e3n r\u1ea5t nhi\u1ec1u.<\/li><li><em>lazySizesConfig.init<\/em> (m\u1eb7c \u0111\u1ecbnh: <em>true<\/em>): Theo m\u1eb7c \u0111\u1ecbnh th\u00ec lazysizes s\u1ebd t\u1ef1 kh\u1edfi t\u1ea1o b\u1ea3n th\u00e2n n\u00f3, \u0111\u1ec3 t\u1ea3i t\u00e0i nguy\u00ean s\u1edbm nh\u1ea5t c\u00f3 th\u1ec3. Trong tr\u01b0\u1eddng h\u1ee3p kh\u00f4ng ch\u1eafc ch\u1eafn b\u1ea1n c\u1ea7n thi\u1ebft l\u1eadp\/c\u1ea5u h\u00ecnh m\u1ed9t v\u00e0i th\u1ee9 v\u1edbi \u0111o\u1ea1n m\u00e3 sau, b\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp t\u00f9y ch\u1ecdn n\u00e0y l\u00e0 <em>false<\/em> v\u00e0 g\u1ecdi lazySizes.int() r\u00f5 r\u00e0ng sau.<\/li><\/ul>\n\n\n<p>V\u00ed d\u1ee5 demo khi loadMode = 1, trang m\u1eabu (b\u1ea1n n\u00ean test trong khi \u1edf g\u1ea7n c\u1ed9t ph\u00e1t wifi): <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-loadmode1.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-loadmode1.html<\/a><\/p>\n\n\n<p>expFactor l\u00e0 t\u00f9y ch\u1ec9nh c\u00f3 nhi\u1ec1u \u0111i\u1ec3m gi\u1ed1ng preloadAfterLoad, nh\u01b0ng n\u00f3 l\u00e0 phi\u00ean b\u1ea3n preload b\u1edbt &#8220;g\u1eaft&#8221;:<\/p>\n\n\n<ul><li>Trong th\u1eddi gian r\u1ea3nh r\u1ed7i lazysizes s\u1ebd t\u1ea3i c\u00e1c \u1ea3nh n\u1eb1m trong viewport m\u1edf r\u1ed9ng, ch\u1eb3ng h\u1ea1n n\u1ebfu b\u1ea1n ch\u1ecdn expand l\u00e0 1000, v\u00e0 expFactor l\u00e0 6, l\u00fac r\u1ea3nh r\u1ed7i tr\u00ecnh duy\u1ec7t s\u1ebd m\u1edf r\u1ed9ng viewport \u0111\u1ebfn 4000, v\u00e0 do v\u1eady r\u1ea5t nhi\u1ec1u \u1ea3nh c\u00f3 kh\u1ea3 n\u0103ng \u0111\u01b0\u1ee3c t\u1ea3i<\/li><li>Trong khi v\u1edbi preloadAfterLoad, khi tr\u00ecnh duy\u1ec7t r\u1ea3nh r\u1ed7i, n\u00f3 s\u1ebd t\u1ea3i t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed \u1ea3nh c\u00e0ng nhanh c\u00e0ng t\u1ed1t, kh\u00f4ng k\u1ec3 ng\u01b0\u1ee1ng n\u00e0o c\u1ea3<\/li><\/ul>\n\n\n<p>Trang demo v\u1edbi expand = 1000 v\u00e0 expFactor = 6: <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-exp1000-factor6.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-exp1000-factor6.html<\/a><\/p>\n\n\n<p>(\u0110\u1ecdc <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p3\/\" target=\"_blank\" rel=\"noreferrer noopener\">ti\u1ebfp ph\u1ea7n 3<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea1n \u0111\u1ecdc c\u00f3 th\u1ec3 tham kh\u1ea3o ph\u1ea7n 1 v\u1ec1 th\u01b0 vi\u1ec7n lazysizes \u1edf \u0111\u00e2y. JS API lazysizes t\u1ef1 \u0111\u1ed9ng nh\u1eadn di\u1ec7n c\u00e1c ph\u1ea7n t\u1eed m\u1edbi v\u1edbi class lazyload, v\u00ec th\u1ebf b\u1ea1n kh\u00f4ng c\u1ea7n th\u1ef1c hi\u1ec7n l\u1eddi g\u1ecdi ho\u1eb7c c\u1ea5u h\u00ecnh b\u1ea5t c\u1ee9 \u0111i\u1ec1u g\u00ec trong ph\u1ea7n l\u1edbn tr\u01b0\u1eddng h\u1ee3p. JS API &#8211; c\u00e1c t\u00f9y ch\u1ecdn &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 2) &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"Trong ph\u1ea7n 2, b\u1ea1n s\u1ebd \u0111\u00e0o s\u00e2u th\u01b0 vi\u1ec7n lazysizes b\u1eb1ng c\u00e1c t\u00f9y ch\u1ecdn n\u00e2ng cao c\u1ee7a n\u00f3. R\u1ea5t h\u1eefu \u00edch n\u1ebfu b\u1ea1n mu\u1ed1n t\u1eadn d\u1ee5ng to\u00e0n b\u1ed9 s\u1ee9c m\u1ea1nh c\u1ee7a th\u01b0 vi\u1ec7n lazy load \u1ea3nh n\u00e0y.\" \/>\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-p2\/\" \/>\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 2) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Trong ph\u1ea7n 2, b\u1ea1n s\u1ebd \u0111\u00e0o s\u00e2u th\u01b0 vi\u1ec7n lazysizes b\u1eb1ng c\u00e1c t\u00f9y ch\u1ecdn n\u00e2ng cao c\u1ee7a n\u00f3. R\u1ea5t h\u1eefu \u00edch n\u1ebfu b\u1ea1n mu\u1ed1n t\u1eadn d\u1ee5ng to\u00e0n b\u1ed9 s\u1ee9c m\u1ea1nh c\u1ee7a th\u01b0 vi\u1ec7n lazy load \u1ea3nh n\u00e0y.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/\" \/>\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-05T00:02:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/lazysizes-expand-100-1024x520.png\" \/>\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=\"25 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 2) &#8226; Ki\u1ebfn c\u00e0ng","description":"Trong ph\u1ea7n 2, b\u1ea1n s\u1ebd \u0111\u00e0o s\u00e2u th\u01b0 vi\u1ec7n lazysizes b\u1eb1ng c\u00e1c t\u00f9y ch\u1ecdn n\u00e2ng cao c\u1ee7a n\u00f3. R\u1ea5t h\u1eefu \u00edch n\u1ebfu b\u1ea1n mu\u1ed1n t\u1eadn d\u1ee5ng to\u00e0n b\u1ed9 s\u1ee9c m\u1ea1nh c\u1ee7a th\u01b0 vi\u1ec7n lazy load \u1ea3nh n\u00e0y.","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-p2\/","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 2) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Trong ph\u1ea7n 2, b\u1ea1n s\u1ebd \u0111\u00e0o s\u00e2u th\u01b0 vi\u1ec7n lazysizes b\u1eb1ng c\u00e1c t\u00f9y ch\u1ecdn n\u00e2ng cao c\u1ee7a n\u00f3. R\u1ea5t h\u1eefu \u00edch n\u1ebfu b\u1ea1n mu\u1ed1n t\u1eadn d\u1ee5ng to\u00e0n b\u1ed9 s\u1ee9c m\u1ea1nh c\u1ee7a th\u01b0 vi\u1ec7n lazy load \u1ea3nh n\u00e0y.","og_url":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-05T00:02:34+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/lazysizes-expand-100-1024x520.png"}],"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":"25 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/","url":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/","name":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 2) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-05T00:02:34+00:00","dateModified":"2020-04-05T00:02:34+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"Trong ph\u1ea7n 2, b\u1ea1n s\u1ebd \u0111\u00e0o s\u00e2u th\u01b0 vi\u1ec7n lazysizes b\u1eb1ng c\u00e1c t\u00f9y ch\u1ecdn n\u00e2ng cao c\u1ee7a n\u00f3. R\u1ea5t h\u1eefu \u00edch n\u1ebfu b\u1ea1n mu\u1ed1n t\u1eadn d\u1ee5ng to\u00e0n b\u1ed9 s\u1ee9c m\u1ea1nh c\u1ee7a th\u01b0 vi\u1ec7n lazy load \u1ea3nh n\u00e0y.","breadcrumb":{"@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/#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 2)"}]},{"@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\/16872"}],"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=16872"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16872\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}