Jorge Pirela webjp1
webjp1
/ loadPicture-plugin-js-example.js
Created
January 10, 2020 20:20
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
| $('.loadPicturePluginClick').click(function(){ | |
| $('#lo').loadPicture(function(){ | |
| console.log('Picture Loaded'); | |
| }); | |
| }); |
webjp1
/ loadPicture-plugin-markup-example.html
Created
January 10, 2020 20:19
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 id="lo"> | |
| <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)" data-srcset="./assets/images/compressed/size-80/chrome-wallpaper.webp" type="image/webp"> | |
| <source media="(min-width: 1024px)" data-srcset="./assets/images/compressed/size-80/chrome-wallpaper.jpeg" type="image/jpeg"> |
webjp1
/ loadImage-plugin-js-example.js
Created
January 9, 2020 16:03
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
| $('.loadImagePluginClick').click(function(){ | |
| $('.loadImagePlugin').loadImage(function(){ | |
| alert('Image Loaded'); | |
| }); | |
| }); |
webjp1
/ loadImage-plugin-markup-example.html
Created
January 9, 2020 16:02
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="loadImagePlugin" style="max-width:100%;" 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" /> |
webjp1
/ viewport-watcher-js-example.js
Created
January 9, 2020 06:53
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
| $('.viewportWatcherExampleTrigger').viewportWatcher(function() { | |
| // Element is in the Viewport Do Something | |
| $(this).find('.viewportWatcherExample').fadeIn('slow'); | |
| }, function() { | |
| // Element is out of the Viewport Do Other Thing | |
| let display = $(this).css('display'); | |
| if (display != "none") { | |
| $(this).find('.viewportWatcherExample').fadeOut('fast'); | |
| } | |
| }); |
webjp1
/ viewport-watcher-markup-example.html
Created
January 9, 2020 06:53
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-100 demo viewportWatcherExampleTrigger"> | |
| <div class="viewportWatcherExample" style="width:100%;height:400px;background-color:red;margin:40px 0;display:none;"> | |
| </div> | |
| </div> |
webjp1
/ on-viewport-plugin-js-example.js
Created
January 8, 2020 19:47
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
| $('#checkIfIsOnViewport').click(function(){ | |
| $('.testToSeeIfIsOnViewport').OnViewport(function(){ | |
| // Element is on viewport | |
| // alert("Element Is On Window Viewport"); | |
| console.log($(this)); | |
| $(this).fadeOut(); | |
| },function(){ | |
| // Element is not on Viewport | |
| // alert("Element is not on Window Viewport"); | |
| console.log($(this)); |
webjp1
/ on-viewport-plugin-markup-example.html
Created
January 8, 2020 19:46
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="testToSeeIfIsOnViewport" style="width:100%;height:400px;background-color:red;margin:40px 0;"> | |
| </div> | |
| <button id="checkIfIsOnViewport"> | |
| Check If Element is on Viewport | |
| </button> |
webjp1
/ on-click-iframe-markup-example.html
Created
January 7, 2020 20:32
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
| <iframe data-type="iframe" data-method="click" data-trigger="#loadIframe" data-src="./iframe-lazy-load.html" ></iframe> | |
| <button id="loadIframe">Load Iframe</button> |
webjp1
/ on-viewport-iframe-markup-example.html
Created
January 7, 2020 20:29
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
| <iframe data-type="iframe" data-method="viewport" data-src="./iframe-lazy-load.html" ></iframe> |
NewerOlder