<!--<head><style type='text/css'>@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf)format('truetype');}</style>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=f6237e5c-46ef-42b6-89d7-632e00aebeb1' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=f6237e5c-46ef-42b6-89d7-632e00aebeb1' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

</head>-->

Home » Javascript » jQuery » Thủ Thuật Blogspot » Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng jquery cho Blogspot

Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng jquery cho Blogspot

Javascript jQuery Thủ Thuật Blogspot

tháng 1 22, 2018

Share on Facebook Tweet on Twitter  

Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng js cho Blogspot - hiệu ứng load ảnh bằng jquery, hình ảnh sẽ được tải tuần tự từ trên xuống dưới tạo hiệu ứng mượt mà cho Blog, trông đẹp và chuyên nghiệp hơn.

Cách thêm vào Blogspot

Chèn tất cả javascript này vào trước </head> trong Template.

LABEL : #Javascript #jQuery #Thủ Thuật Blogspot

posted by

Nguyễn Đình Diện

at tháng 1 22, 2018

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2838643729-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7UcwmsQE5oLDWaOJ9rwrhz3LSfkg:1750256076495';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7306137828648818524','//diendzfed.blogspot.com/2018/01/hieu-ung-lazyload-load-anh-tuan-tu-va.html','7306137828648818524');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7306137828648818524', 'title': 'Nguy\u1ec5n Di\u1ec7n Blogger', 'url': 'http://diendzfed.blogspot.com/2018/01/hieu-ung-lazyload-load-anh-tuan-tu-va.html', 'canonicalUrl': 'http://diendzfed.blogspot.com/2018/01/hieu-ung-lazyload-load-anh-tuan-tu-va.html', 'homepageUrl': 'http://diendzfed.blogspot.com/', 'searchUrl': 'http://diendzfed.blogspot.com/search', 'canonicalHomepageUrl': 'http://diendzfed.blogspot.com/', 'blogspotFaviconUrl': 'http://diendzfed.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'vi', 'localeUnderscoreDelimited': 'vi', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - RSS\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7306137828648818524/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/8424001365460407707/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/b246884865dba831', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Nh\u1eadn \u0111\u01b0\u1eddng li\xean k\u1ebft', 'key': 'link', 'shareMessage': 'Nh\u1eadn \u0111\u01b0\u1eddng li\xean k\u1ebft', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Chia s\u1ebb v\u1edbi Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Chia s\u1ebb v\u1edbi X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Chia s\u1ebb v\u1edbi Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27vi\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': '\u0110\u1ecdc th\xeam', 'pageType': 'item', 'postId': '8424001365460407707', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hhRKh9_Of6Gp7yZTlv2zBg-5MRiPm6npVOViPq5pGbCdv8g3lsg3n93gkmGZ8FcZCZ8jq8UIvit2pUuKzyHMHoq0Tx9p5ijW_-0okVDCJvJ59h1bC-jaaPcimdquIvxXwv_Ahy52gXYC/s72-c/hieu-ung-lazyload-load-anh-tuan-tu-va-muot-ma-cho-blogspot--------------BacSiWindows-Com.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hhRKh9_Of6Gp7yZTlv2zBg-5MRiPm6npVOViPq5pGbCdv8g3lsg3n93gkmGZ8FcZCZ8jq8UIvit2pUuKzyHMHoq0Tx9p5ijW_-0okVDCJvJ59h1bC-jaaPcimdquIvxXwv_Ahy52gXYC/s1600/hieu-ung-lazyload-load-anh-tuan-tu-va-muot-ma-cho-blogspot--------------BacSiWindows-Com.png', 'pageName': 'Hi\u1ec7u \u1ee9ng lazyload - load \u1ea3nh tu\u1ea7n t\u1ef1 v\xe0 m\u01b0\u1ee3t m\xe0 b\u1eb1ng jquery cho Blogspot', 'pageTitle': 'Nguy\u1ec5n Di\u1ec7n Blogger: Hi\u1ec7u \u1ee9ng lazyload - load \u1ea3nh tu\u1ea7n t\u1ef1 v\xe0 m\u01b0\u1ee3t m\xe0 b\u1eb1ng jquery cho Blogspot'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Ch\u1ec9nh s\u1eeda', 'linkCopiedToClipboard': '\u0110\xe3 sao ch\xe9p \u0111\u01b0\u1eddng li\xean k\u1ebft v\xe0o b\u1ea3ng nh\u1edb t\u1ea1m!', 'ok': 'Ok', 'postLink': 'Li\xean k\u1ebft b\xe0i \u0111\u0103ng'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'T\xf9y ch\u1ec9nh', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Hi\u1ec7u \u1ee9ng lazyload - load \u1ea3nh tu\u1ea7n t\u1ef1 v\xe0 m\u01b0\u1ee3t m\xe0 b\u1eb1ng jquery cho Blogspot', 'description': 'Hi\u1ec7u \u1ee9ng lazyload - load \u1ea3nh tu\u1ea7n t\u1ef1 v\xe0 m\u01b0\u1ee3t m\xe0 b\u1eb1ng js cho Blogspot - hi\u1ec7u \u1ee9ng load \u1ea3nh b\u1eb1ng jquery, h\xecnh \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i tu\u1ea7n t\u1ef1 t\u1eeb tr\xean x...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hhRKh9_Of6Gp7yZTlv2zBg-5MRiPm6npVOViPq5pGbCdv8g3lsg3n93gkmGZ8FcZCZ8jq8UIvit2pUuKzyHMHoq0Tx9p5ijW_-0okVDCJvJ59h1bC-jaaPcimdquIvxXwv_Ahy52gXYC/s1600/hieu-ung-lazyload-load-anh-tuan-tu-va-muot-ma-cho-blogspot--------------BacSiWindows-Com.png', 'url': 'http://diendzfed.blogspot.com/2018/01/hieu-ung-lazyload-load-anh-tuan-tu-va.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 8424001365460407707}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'H-Site', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'H-Rigt', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/4162115085-lbx__vi.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'grids', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
</script>
</body>-->

Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng jquery cho Blogspot

Cách thêm vào Blogspot

Related Post