"image"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ramshid/pen/vLWdKR?depth=everything&limit=all&order=popularity&page=86&q=image&show_forks=false" /> <style class="cp-pen-styles">body{ background: #eee; font-family: 'Arial'; } pre { font-family: serif; margin-bottom: 10px; overflow: auto; width: auto; padding: 5px; background-color: #eee; width: 650px!ie7; padding-bottom: 20px!ie7; max-height: 600px; } .list { background: #fff none repeat scroll 0 0; border-radius: 6px; float: left; margin: 0 20px 20px 0; overflow: hidden; width: 270px; } .list .thumb { height: 200px; position: relative; width: 300px; } .placeholder { overflow: hidden; } .thumb .placeholder { height: 200px; } .placeholder img { opacity: 0; transition: opacity 1s ease; } .placeholder img.loaded { opacity: 1; } .placeholder .simg { filter: blur(10px); } .placeholder .limg { display: none; } .placeholder .limg.loaded { display: block; }</style></head><body> <!-- Faceboook Like Lazy Loading Images -- created by Ramshid K github.com/ramshid -- based on https://codepen.io/jmperez/full/yYjPER/ --> <!-- Demo --> <h1>Demo</h1> <!-- item 1 --> <div class="list"> <div class="thumb"> <div data-large="http://assets.boostlizer.com/thumbnails/436/medium/1.jpg" class="placeholder"> <img width="300" height="200" class="simg" src="http://assets.boostlizer.com/thumbnails/436/small/1.jpg"> </div> </div> </div> <!-- item 2 --> <div class="list"> <div class="thumb"> <div data-large="http://assets.boostlizer.com/thumbnails/444/medium/voice.jpg" class="placeholder"> <img width="300" height="200" class="simg" src="http://assets.boostlizer.com/thumbnails/444/small/voice.jpg"> </div> </div> </div> <!-- item 3 --> <div class="list"> <div class="thumb"> <div data-large="http://assets.boostlizer.com/thumbnails/412/medium/1.jpg" class="placeholder"> <img width="300" height="200" class="simg" src="http://assets.boostlizer.com/thumbnails/412/small/1.jpg"> </div> </div> </div> <!-- item 4 --> <div class="list"> <div class="thumb"> <div data-large="http://assets.boostlizer.com/thumbnails/400/medium/Untitled-1.jpg" class="placeholder"> <img width="300" height="200" class="simg" src="http://assets.boostlizer.com/thumbnails/400/small/Untitled-1.jpg"> </div> </div> </div> <br clear="all" /> <!-- How it's Works --> <h1>How it's Works</h1> <p>First we load small images for example following image </p> <p> <pre><code><img src="http://assets.boostlizer.com/thumbnails/412/small/1.jpg"></code></pre> <img src="http://assets.boostlizer.com/thumbnails/412/small/1.jpg"> </p> <p>got 75x50 dimensions but set height and width of this image to large image's width and height.</p> <p> <pre><code><http://assets.boostlizer.com/thumbnails/412/medium/1.jpg" width="300" height="200"></code></pre> <img class="simg" src="http://assets.boostlizer.com/thumbnails/412/medium/1.jpg" width="300" height="200"></p> <p>with help of some css and javascript we load large images and hide small images.</p> <p>Please check this Pen's CSS and JS. Thanks</p> <hr /> <p>Based on José Manuel Pérez's (@jmperez) <a href="https://codepen.io/jmperez/pen/yYjPER/">Reproducing Medium loading image effect</a> </p> <p>Gist <a href="https://gist.github.com/ramshid/7ccc7f64e44b0e6603ab">https://gist.github.com/ramshid/7ccc7f64e44b0e6603ab</a> </p> <p>For Live Site Example <a href="http://boostlizer.com">check here</a> </p> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var lazyInt; lazyInt = function() { var placeholder = document.querySelectorAll('.placeholder'), i = 0; while (i < placeholder.length) {if (window.CP.shouldStopExecution(1)){break;} // 1: load small image and show it var small = placeholder[i].querySelector('.simg'), img = new Image(); img.onload = (function(i) { return function() { placeholder[i].querySelector('.simg').classList.add('loaded'); } })(i); img.src = small.src; // 2: load large image var imgLarge = new Image(); imgLarge.onload = (function(i) { return function() { placeholder[i].querySelector('.limg').classList.add('loaded'); placeholder[i].querySelector('.simg').style.display = "none"; } })(i); imgLarge.src = placeholder[i].dataset.large; imgLarge.classList.add('limg'); // 3 show large image placeholder[i].appendChild(imgLarge); i++; } window.CP.exitedLoop(1); }; window.onload = lazyInt; //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Material Kit
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments: