Jorge Pirela webjp1
webjp1
/ on-viewport-image-markup-example.html
Last active
December 30, 2019 02:22
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
| <img | |
| class="{{ Any Class You Want }}" | |
| src="{{ AnyPlaceHolderImageYouWant }}" | |
| data-type="image" | |
| data-method="viewport" | |
| data-src="./assets/images/compressed/chrome-wallpaper.jpg" | |
| alt="Chrome Wallpaper for Lazy Load Example" | |
| title="Example Image: Img Tag lazy Load" | |
| /> |
webjp1
/ on-parent-viewport-image-markup-example.html
Created
December 30, 2019 02:56
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
| <img | |
| class="{{ Any Class You Want }}" | |
| src="{{ AnyPlaceHolderImageYouWant }}" | |
| data-type="image" | |
| data-method="parentViewport" | |
| data-parent="#parent" | |
| data-src="./assets/images/compressed/chrome-wallpaper.jpg" | |
| alt="Chrome Wallpaper for Lazy Load Example" | |
| title="Example Image: Img Tag lazy Load" | |
| /> |
webjp1
/ on-click-image-markup-example.html
Created
January 2, 2020 07:00
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
| <img | |
| class="imageClick" | |
| data-type="image" | |
| data-method="click" | |
| data-trigger="#imageClickTrigger" | |
| data-src="./assets/images/compressed/chrome-wallpaper.jpg" | |
| data-webp="./assets/images/compressed/chrome-wallpaper.webp" | |
| alt="Chrome Wallpaper for Lazy Load Example" | |
| title="Example Image: Img Tag lazy Load" /> | |
| <button id="imageClickTrigger">Load Image</button> |
webjp1
/ on-viewport-picture-markup-example.html
Created
January 5, 2020 05:35
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
| <picture data-type="picture" data-method="viewport"> | |
| <source media="(min-width: 1280px)" data-srcset="./assets/images/compressed/chrome-wallpaper.webp" type="image/webp"> | |
| <source media="(min-width: 1280px)" data-srcset="./assets/images/compressed/chrome-wallpaper.jpg" type="image/jpg"> | |
| <source media="(min-width: 1152px)" data-srcset="./assets/images/compressed/size-90/chrome-wallpaper.webp" type="image/webp"> | |
| <source media="(min-width: 1152px)" data-srcset="./assets/images/compressed/size-90/chrome-wallpaper.jpeg" type="image/jpeg"> | |
| <source media="(min-width: 1088px)" data-srcset="./assets/images/compressed/size-85/chrome-wallpaper.webp" type="image/webp"> | |
| <source media="(min-width: 1088px)" data-srcset="./assets/images/compressed/size-85/chrome-wallpaper.jpeg" type="image/jpeg"> | |
| <source media="(min-width: 1024px)" d |
webjp1
/ on-click-picture-markup-example.html
Created
January 5, 2020 05:36
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
| <picture data-type="picture" data-method="click" data-trigger="#pictureLoad"> | |
| <source media="(min-width: 1280px)" data-srcset="./assets/images/compressed/chrome-wallpaper.webp" type="image/webp"> | |
| <source media="(min-width: 1280px)" data-srcset="./assets/images/compressed/chrome-wallpaper.jpg" type="image/jpg"> | |
| <source media="(min-width: 1152px)" data-srcset="./assets/images/compressed/size-90/chrome-wallpaper.webp" type="image/webp"> | |
| <source media="(min-width: 1152px)" data-srcset="./assets/images/compressed/size-90/chrome-wallpaper.jpeg" type="image/jpeg"> | |
| <source media="(min-width: 1088px)" data-srcset="./assets/images/compressed/size-85/chrome-wallpaper.webp" type="image/webp"> | |
| <source media="(min-width: 1088px)" data-srcset="./assets/images/compressed/size-85/chrome-wallpaper.jpeg" type="image/jpeg"> | |
| <source medi |
webjp1
/ on-viewport-background-image-markup-example.html
Created
January 5, 2020 20:44
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
| <div class="col-50 background" data-type="backgroundImage" data-method="viewport" data-src="./assets/images/compressed/chrome-wallpaper.jpg" data-webp="./assets/images/compressed/chrome-wallpaper.webp"> | |
| <!-- Whatever Content is on the div if there is any ---> | |
| </div> |
webjp1
/ on-viewport-video-markup-example.html
Created
January 7, 2020 16:07
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
| <video controls data-type="video" data-method="viewport" data-poster="./assets/images/compressed/chrome-wallpaper.jpg" data-posterwebp="./assets/images/compressed/chrome-wallpaper.webp"> | |
| <source data-src="./assets/video/movie.ogv" type="video/ogg"> | |
| <source data-src="./assets/video/movie.mp4" type="video/mp4"> | |
| <p>Your browser does not support the video tag.</p> | |
| </video> |
webjp1
/ on-click-video-markup-example.html
Created
January 7, 2020 17:50
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
| <video controls data-type="video" data-method="click" data-trigger="#loadVideo" data-poster="./assets/images/compressed/chrome-wallpaper.jpg" data-posterwebp="./assets/images/compressed/chrome-wallpaper.webp"> | |
| <source data-src="./assets/video/movie.ogv" type="video/ogg"> | |
| <source data-src="./assets/video/movie.mp4" type="video/mp4"> | |
| <p>Your browser does not support the video tag.</p> | |
| </video> | |
| <button id="loadVideo"> | |
| Load This video | |
| </button> |
webjp1
/ on-viewport-background-video-markup-example.html
Created
January 7, 2020 18:55
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
| <section id="backgroundVideos" class="col-100 contentSection videoBackground" data-type="backgroundVideo" data-method="viewport" data-src="./assets/video/movie.mp4" data-srcogg="./assets/video/movie.ogv"> | |
| </section> |
webjp1
/ on-click-background-video-markup-example.html
Created
January 7, 2020 19:13
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
| <div class="wrapper" data-type="backgroundVideo" data-method="click" data-trigger="#loadVideoBg" data-src="./assets/video/movie.mp4" data-srcogg="./assets/video/movie.ogv"> | |
| </div> |
OlderNewer