{"id":18850,"date":"2013-11-24T13:18:22","date_gmt":"2013-11-24T11:18:22","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=18850"},"modified":"2013-11-24T13:18:22","modified_gmt":"2013-11-24T11:18:22","slug":"echo-lazy-loading-html5-images-with-data-attributes-via-javascript","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2013\/11\/24\/echo-lazy-loading-html5-images-with-data-attributes-via-javascript\/","title":{"rendered":"Echo – lazy-loading HTML5 images with data-* attributes via JavaScript"},"content":{"rendered":"\n

Echo<\/a>\u00a0 is quite handy for web developers. \u00a0On those pages that feature a lot of images, things can get slow and the server might get too much of an abuse (with more traffic thrown at it). \u00a0One way to work around this is to only load those images that are in the visible part of the screen. \u00a0Here<\/a> is a demo of how it works. \u00a0Just keep scrolling down and notice how by default you have a blank.gif image shown, with a standard loading indicator and a split second later you see the actual image which was supposed to be in there.<\/p>\n

Simple, easy, elegant – and that’s how I like it.<\/p>\n\n","protected":false},"excerpt":{"rendered":"\n

Echo\u00a0 is quite handy for web developers. \u00a0On those pages that feature a lot of images, things can get slow and the server might get too much of an abuse (with more traffic thrown at it). \u00a0One way to work around this is to only load those images that are in the visible part of … Continue reading Echo – lazy-loading HTML5 images with data-* attributes via JavaScript<\/span><\/a><\/p>\n\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false,"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1190,1139,246,1057,1330],"keyring_services":[],"class_list":["post-18850","post","type-post","status-publish","format-standard","hentry","category-general","category-programming","category-technology","category-web-work","tag-html","tag-javascript","tag-optimization","tag-performance","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t