Last active
September 25, 2017 12:05
-
-
Save AramZS/b3fc654813905cf9ef7d to your computer and use it in GitHub Desktop.
LazyLoad techniques
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- http://www.vox.com/2015/1/29/7947263/media-internet-poetry --> | |
| <img | |
| class="vox-lazy-load m-chorus-asset__in-entry-body" | |
| src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" | |
| alt=" " | |
| data-chorus-asset-id="3356728" | |
| data-full-size="https://cdn2.vox-cdn.com/thumbor/JjbTvM14EYv6600xMXvyxzNw4BA=/cdn0.vox-cdn.com/uploads/chorus_asset/file/3356728/Vox.0.png" | |
| data-original="https://cdn1.vox-cdn.com/uploads/chorus_asset/file/3356728/Vox.0.png" /> | |
| <noscript> | |
| <img | |
| alt=" " | |
| src="https://cdn2.vox-cdn.com/thumbor/JjbTvM14EYv6600xMXvyxzNw4BA=/cdn0.vox-cdn.com/uploads/chorus_asset/file/3356728/Vox.0.png"/> | |
| </noscript> | |
| <!-- http://motherboard.vice.com/read/hipster-runoff-the-last-relevant-blogger --> | |
| <img | |
| class="vmp-image" | |
| src="http://motherboard.vice.com//motherboard-images.vice.com/content-images/contentimage/18654/1422612553092311.jpg" | |
| alt="" | |
| data-original-width="594" | |
| data-original-height="474" /> | |
| <!-- http://www.fastcompany.com/3041635/fast-feed/tumblr-overhauls-its-writing-tools-for-the-medium-age --> | |
| <img | |
| src="http://www.fastcompany.com//e.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/01/3041635-inline-tumblrinlineniuw6uc34a1qzpzhj.gif" | |
| alt="" /> | |
| <!-- http://dish.andrewsullivan.com/2015/01/28/a-note-to-my-readers/ --> | |
| <a | |
| href="https://sullydish.files.wordpress.com/2007/05/shipcape.jpg" | |
| target="_blank"> | |
| <img | |
| class="wp-image-126282 alignnone" | |
| src="https://s0.wp.com/wp-content/themes/vip/plugins/lazy-load/images/1x1.trans.gif" | |
| alt="shipcape.jpg" | |
| width="580" | |
| height="434" | |
| data-lazy-src="https://sullydish.files.wordpress.com/2007/05/shipcape.jpg?w=580&h=434" /> | |
| <noscript> | |
| <img | |
| class="wp-image-126282 alignnone" | |
| src="https://sullydish.files.wordpress.com/2007/05/shipcape.jpg?w=580&h=434" | |
| alt="shipcape.jpg" | |
| width="580" | |
| height="434"/> | |
| </noscript> | |
| </a> | |
| <!-- http://junkee.com/watch-emma-watsons-second-excellent-speech-about-gender-equality/49587 --> | |
| <img | |
| class="attachment-medium wp-post-image" | |
| title="Here's A Recap Of All The Cringe-Worthy Things That Happened To Female Tennis Players This Week" | |
| src="http://junkee.com/wp-content/themes/junkee2/images/spacer.png" | |
| alt="Here's A Recap Of All The Cringe-Worthy Things That Happened To Female Tennis Players This Week" | |
| width="330" | |
| height="220" | |
| data-src="http://images.junkee.com/wp-content/uploads/2015/01/twirl-330x220.jpg" /> | |
| <!-- http://www.vice.com/read/someones-been-using-my-identity-to-catfish-people-for-nearly-ten-years-930 --> | |
| <img | |
| src="http://www.vice.com//assets2.vice.com/images/content-images/2015/01/20/someones-been-using-my-identity-to-catfish-people-for-nearly-ten-years-930-body-image-1421788884.png" | |
| alt="" /> | |
| <!-- http://qz.com/329123/melinda-bill-gates-foundation-annual-letter-mobile-banking/ --> | |
| <img | |
| title="" | |
| src="http://img.qz.com/2015/01/adults-who-saved-at-a-financial-institution-in-the-last-12-months_mapbuilder-2.png?w=640" | |
| alt="" | |
| data-retina="http://img.qz.com/2015/01/adults-who-saved-at-a-financial-institution-in-the-last-12-months_mapbuilder-2.png?w=1024" /> | |
| <!-- http://www.nytimes.com/2015/01/25/magazine/the-megyn-kelly-moment.html?_r=1 --> | |
| <img | |
| class="media-viewer-candidate" | |
| src="http://static01.nyt.com/images/2015/01/25/magazine/25kelly7/25kelly7-articleLarge.jpg" | |
| alt="" | |
| data-mediaviewer-src="http://static01.nyt.com/images/2015/01/25/magazine/25kelly7/25kelly7-superJumbo.jpg" | |
| data-mediaviewer-caption="Megyn Kelly in front of Fox News headquarters in New York." | |
| data-mediaviewer-credit="Stephanie Sinclair for The New York Times" /> | |
| <!-- http://www.cracked.com/article_21910_8-ways-legal-system-screws-rape-victims-like-me.html --> | |
| <img | |
| alt="" | |
| width="350" | |
| height="293" | |
| data-img="http://i.crackedcdn.com/phpimages/article/2/9/0/361290_v1.jpg" /> | |
| <img | |
| alt="" | |
| width="350" | |
| height="234" | |
| data-img="http://i.crackedcdn.com/phpimages/article/2/4/8/361248.jpg?v=1" /> | |
| <!-- http://www.buzzfeed.com/danieldalton/boss-witch#.rprAEPxr8 --> | |
| <div id="superlist_3573263_4690868" class="buzz_superlist_item buzz_superlist_item_image buzz_superlist_item_wide image_hit"> | |
| <h2> | |
| <span class="buzz_superlist_number_inline">117.</span> “Does this mean The Patriarchy is over?” | |
| </h2> | |
| <div class="sub_buzz_content"> | |
| <img | |
| class="bf_dom" | |
| src="data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" | |
| alt=""Does this mean The Patriarchy is over?"" | |
| width="625" | |
| height="400" /> | |
| <p class="print"> | |
| <a | |
| href="http://s3-ec.buzzfed.com/static/2015-01/16/5/enhanced/webdr08/enhanced-27496-1421405896-5.png" | |
| rel="nofollow"> | |
| <b>View this image ›</b> | |
| </a> | |
| </p> | |
| </div> | |
| Warner Bros. | |
| <p class="sub_buzz_desc_w_attr"> | |
| “Unfortunately no. Their figurehead is gone, yes, but the fight will continue. We need to weed out and destroy sexism in all its forms. Bitches got work to do.” | |
| </p> | |
| </div> | |
| <!-- http://www.theguardian.com/artanddesign/2015/jan/11/the-daring-art-of-marlene-dumas-duct-tape-pot-bellies-and-bin-laden?CMP=share_btn_fb --> | |
| <a | |
| class="article__img-container js-gallerythumbs" | |
| href="/artanddesign/2015/jan/11/the-daring-art-of-marlene-dumas-duct-tape-pot-bellies-and-bin-laden#img-5" | |
| data-link-name="Launch Article Lightbox" | |
| data-is-ajax=""> | |
| <img | |
| class="gu-image" | |
| src="http://www.theguardian.com//i.guim.co.uk/static/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2015/1/8/1420740594938/ffd6a724-3e2b-4d52-9558-054ed13a9522-760x1020.jpeg" | |
| alt="Amy-Blue 2011" | |
| width="760" /> | |
| </a> | |
| <!-- http://cir.ca/news/improving-911-indoor-location-accuracy --> | |
| <div id="image_mask" class="mobile-image-mask" data-horizon="0.196875"> | |
| <img | |
| id="hero-image" | |
| title="Flickr User Karlis Dambrans" | |
| src="http://cdn.cir.ca/titleimages/05e/08a1126d45f5a254e79244e3c518.jpg" | |
| alt="Flickr User Karlis Dambrans" | |
| name="hero-image" | |
| data-src-2x="http://cdn.cir.ca/titleimages/05e/08a1126d45f5a254e79244e3c518@2x.jpg" | |
| /> | |
| </div> | |
| <!-- http://www.newyorker.com/news/news-desk/blame-for-charlie-hebdo-murders?mbid=social_facebook --> | |
| <a title="The Blame for the Charlie Hebdo Murders" href="http://www.newyorker.com/wp-content/uploads/2015/01/Packer-Hebdo-461137076-1200.jpg"> | |
| <img | |
| class="post-load horizontal attachment-large" | |
| src="http://www.newyorker.com/wp-content/uploads/2015/01/Packer-Hebdo-461137076-290-150.jpg" | |
| alt="A tribute at the Place de la Republique, in Paris, to victims killed during the attack at Charlie Hebdo." | |
| data-src-mobile="http://www.newyorker.com/wp-content/uploads/2015/01/Packer-Hebdo-461137076-290-150.jpg" | |
| data-src="http://www.newyorker.com/wp-content/uploads/2015/01/Packer-Hebdo-461137076-690.jpg" /> | |
| </a> | |
| <!-- http://thinkprogress.org/culture/2015/01/30/3617592/sexist-obituary-acclaimed-novelist-goes-viral/ --> | |
| <img | |
| src="http://thinkprogress.org//d35brb9zkkbdsd.cloudfront.net/wp-content/uploads/2015/01/CMC.jpg" | |
| alt="Colleen McCullough, 1977." /> | |
| <!-- http://wonkette.com/574701/america-embarks-on-dumbest-science-debate-ever --> | |
| <a href="http://img.wonkette.com/wp-content/uploads/2014/09/science-250x174.png" rel="prettyphoto[574701]"> | |
| <img | |
| class="aligncenter size-full wp-image-559527" | |
| title="Sigh" | |
| src="http://wonkette.com/wp-content/plugins/lazy-load/images/1x1.trans.gif" | |
| alt="Sigh" | |
| width="600" | |
| height="418" | |
| data-lazy-src="http://img.wonkette.com/wp-content/uploads/2014/09/science-250x174.png" | |
| /> | |
| <noscript> | |
| <img class="aligncenter size-full wp-image-559527" | |
| title="Sigh" | |
| src="http://img.wonkette.com/wp-content/uploads/2014/09/science-250x174.png" | |
| alt="Sigh" | |
| width="600" | |
| height="418" | |
| /> | |
| </noscript> | |
| </a> | |
| <!-- http://www.dnainfo.com/new-york/20150203/rockaway-beach/mayor-announce-new-ferry-routes-state-of-city-speech-sources --> | |
| <meta property="og:image" content="http://assets.dnainfo.com/generated/photo/2014/07/east-river-1405958919.jpg/larger.jpg" /> | |
| <a class="js-modal media-modal" title="East River Ferry" href="#" data-toggle="modal" data-target="#modal" data-media="photo" data-width="620" data-height="413" data-id="587460"> | |
| <img | |
| class="vital xs-xxxlarge" | |
| src="http://www.dnainfo.com//assets.dnainfo.com/generated/photo/2014/07/east-river-1405958919.jpg/larger.jpg" | |
| alt=" The East River Ferry, one of the city's water transportation options. " | |
| /> | |
| </a> | |
| <!-- http://techcrunch.com/2015/02/02/googles-u-s-search-ex-mobiles-drops-below-75-as-yahoo-makes-more-firefox-gains --> | |
| <meta property="og:image" content="https://tctechcrunch2011.files.wordpress.com/2015/02/4093575863_9ba39f1a07_b.jpg?w=680" /> | |
| <img src="https://tctechcrunch2011.files.wordpress.com/2014/07/yahoo-earnings.jpg?w=150" alt="Yahoo Reports Mixed Q4 With Mobile Revenue Of $254M, Total Top Line Of $1.18B" /> | |
| <!-- http://venturebeat.com/2015/01/31/why-some-of-techs-greatest-minds-are-still-missing-the-internet-of-things-picture/ --> | |
| <img | |
| width="780" | |
| height="512" | |
| src="//vbstatic.co/assets/img/logo-placeholder.png" | |
| data-src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/Puzzle-pieces-780x512.jpg" | |
| class="attachment-single wp-post-image" | |
| alt="Puzzle pieces" | |
| /> | |
| <noscript> | |
| <img | |
| width="780" | |
| height="512" | |
| src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/Puzzle-pieces-780x512.jpg" | |
| class="attachment-single wp-post-image" alt="Puzzle pieces" /> | |
| </noscript> | |
| <!-- http://www.npr.org/blogs/thesalt/2015/02/09/384951360/if-apple-made-imilk-and-nike-sold-fruit-designer-groceries-as-art --> | |
| <meta property="og:image" content="http://media.npr.org/assets/img/2015/02/09/peddy_exh_7_yogurtn_sq-54786247a82b7a1507bca59e1e604ae9dd2c59a3.jpg?s=1400" /> | |
| <meta property="og:image" content="http://media.npr.org/assets/img/2015/02/09/peddy_exh_1_milk_custom-040c50f9b3d849286ada53592ce40bad480827b6.jpg?s=1400" /> | |
| <div class="img_wrap"> | |
| <img | |
| title="Fruit by Nike is a piece by designer Peddy Mergui in his exhibit "Wheat is Wheat is Wheat," next on display in May at Expo Milano 2015." | |
| alt="Fruit by Nike is a piece by designer Peddy Mergui in his exhibit "Wheat is Wheat is Wheat," next on display in May at Expo Milano 2015." | |
| data-original="http://media.npr.org/assets/img/2015/02/09/peddy_exh_11_fruitpack_enl-a819d5c531f5bd691724b3f70f69e144736ff9d9-s1200.jpg" | |
| /> | |
| </div> | |
| <!-- http://www.bustle.com/articles/64242-that-bachelors-degree-rand-paul-said-he-had-it-doesnt-exist --> | |
| <meta property="og:image" content="http://lovelace-media.imgix.net/getty/479582895.jpg?w=600&h=450&fit=crop&crop=faces&q=70"> | |
| <a id="ember678" class="ember-view main-image-link" href="/articles/64242-that-bachelors-degree-rand-paul-said-he-had-it-doesnt-exist/image/64242"> | |
| <div | |
| id="ember698" | |
| class="ember-view image-view" | |
| data-attachment-id="64242" | |
| data-attachment-src="http://lovelace-media.imgix.net/getty/479582895.jpg?" | |
| > | |
| <img | |
| id="ember699" | |
| class="ember-view" | |
| src="http://lovelace-media.imgix.net/getty/479582895.jpg?w=780&h=439&fit=crop&crop=faces&q=70" | |
| > | |
| </div> | |
| <div id="ember708" class="ember-view article-image-actions"> | |
| <span class="image-zoom-indicator"> | |
| <i class="icon-zoom-in"></i> | |
| </span> | |
| <a id="ember709" class="ember-view share-button share-button-pinterest" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.bustle.com%2Farticles%2F64242-that-bachelors-degree-rand-paul-said-he-had-it-doesnt-exist&media=http%3A%2F%2Flovelace-media.imgix.net%2Fgetty%2F479582895.jpg%3Fw%3D800%26h%3D800%26fit%3Dmax%26q%3D70&description=That%20Bachelor's%20Degree%20Rand%20Paul%20Said%20He%20Had%3F%20It%20Doesn't%20Exist" title="Pin it"> | |
| <i class="icon-pinterest"> | |
| </i> | |
| </a> | |
| </div> | |
| </a> | |
| <!-- http://www.washingtonpost.com/news/morning-mix/wp/2015/02/24/after-8-centuries-rats-exonerated-in-spread-of-black-death-gerbils-implicated/ --> | |
| <a name="09204eeb85"></a> | |
| <img | |
| class="unprocessed" | |
| src="http://www.washingtonpost.com///www.washingtonpost.com/wp-apps/imrs.php?src=http://img.washingtonpost.com/rf/image_908w/2010-2019/WashingtonPost/2013/05/04/Production/Daily/Style/Images/Gerbil_Pageant.JPEG-001f5.jpg&w=480" | |
| alt="" | |
| data-hi-res-src="//www.washingtonpost.com/wp-apps/imrs.php?src=http://img.washingtonpost.com/rf/image_908w/2010-2019/WashingtonPost/2013/05/04/Production/Daily/Style/Images/Gerbil_Pageant.JPEG-001f5.jpg&w=1484" | |
| data-low-res-src="//www.washingtonpost.com/wp-apps/imrs.php?src=http://img.washingtonpost.com/rf/image_908w/2010-2019/WashingtonPost/2013/05/04/Production/Daily/Style/Images/Gerbil_Pageant.JPEG-001f5.jpg&w=480" | |
| /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I've noticed the usage of this tags:
I was wondering if you could help me understand the usage of this tags.
The difference between " data-mediaviewer-src=" and the standard "src=".
Does "data-mediaviewer-caption=" tag work better than a standard alt attribute?
I highly appreciate any insights you may have about this and its SEO impact.
Many Thanks!