Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script>
      (function(_html) {
        _html.className = _html.className.replace(/\bno-js\b/, ' js ');
        _html.className += ('undefined' !== typeof window.SVGRect) ? ' svg ' : ' no-svg ';
      })(document.documentElement);
    </script>
    <script src="https://rawgit.com/Rplus/lazy-blur.js/master/dist%2Flazy-blur.min.js"></script>
  </head>
  <body>
    <h2>hover it to active loading large image</h2>
    <div id="imgs"></div>
    <script type="text/tpl" id="img-tpl">
      <figure class="image">
        <div class="lazy-blur" style="max-width: ${imgW}px; max-height: ${imgH}px">
          <div class="lazy-blur__placeholder" style="padding-bottom: ${imgRatio}%"></div>
          <img src="${imgSurl}" data-src="${imgLurl}" alt="" class="lazy-blur__imgS">
          <figcaption class="image-caption">${imgSource}</figcaption>
        </div>
      </figure>
    </script>
  </body>
</html>
 
var images = [
  {
    w: 500,
    h: 333,
    img: 'https://c2.staticflickr.com/4/3081/2621750099_4e10f3acd8.jpg',
    source: 'https://www.flickr.com/photos/johnc24/2621750099/'
  },
  {
    w: 500,
    h: 331,
    img: 'https://farm1.staticflickr.com/708/22252650811_acbaa63580.jpg',
    source: 'https://www.flickr.com/photos/perdidoenelsiglo/22252650811/'
  },
  {
    w: 500,
    h: 427,
    img: 'https://farm1.staticflickr.com/673/20924906054_198dacf060.jpg',
    source: 'https://flic.kr/p/xT4Byj'
  },
  {
    w: 300,
    h: 300,
    img: 'https://farm1.staticflickr.com/81/225579965_9e05a3e1f8.jpg',
    source: 'https://www.flickr.com/photos/heather0714/225579965/'
  },
  {
    w: 500,
    h: 390,
    img: 'https://c2.staticflickr.com/2/1112/1235327221_376e878c5a.jpg',
    source: 'https://www.flickr.com/photos/joshme17/1235327221/'
  },
  {
    w: 500,
    h: 500,
    img: 'https://c1.staticflickr.com/9/8127/8709335767_8a64a347c9.jpg',
    source: 'https://www.flickr.com/photos/trishhamme/8709335767/'
  },
  {
    w: 412,
    h: 500,
    img: 'https://c1.staticflickr.com/9/8676/16191340719_4ac6e38a9e.jpg',
    source: 'https://www.flickr.com/photos/29233640@N07/16191340719/'
  },
  {
    w: 324,
    h: 500,
    img: 'https://c1.staticflickr.com/5/4118/4922891109_73c4b136f3.jpg',
    source: 'https://www.flickr.com/photos/trishhamme/4922891109/'
  },
  {
    w: 500,
    h: 394,
    img: 'https://c2.staticflickr.com/4/3206/3146819611_358b2612c2.jpg',
    source: 'https://www.flickr.com/photos/14863785@N03/3146819611/'
  },
  {
    w: 500,
    h: 318,
    img: 'https://c2.staticflickr.com/4/3512/3847864550_b5f8fcc789.jpg',
    source: 'https://www.flickr.com/photos/protohiro/3847864550/'
  },
  {
    w: 500,
    h: 366,
    img: 'https://c2.staticflickr.com/6/5544/9463567884_4ab909cc30.jpg',
    source: 'https://www.flickr.com/photos/onepointfour/9463567884/'
  },
  {
    w: 500,
    h: 333,
    img: 'https://farm3.staticflickr.com/2001/2328986800_72df82ea8d.jpg',
    source: 'https://www.flickr.com/photos/forgotever/2328986800/'
  },
  {
    w: 500,
    h: 338,
    img: 'https://c2.staticflickr.com/6/5557/15058410632_b604637fca.jpg',
    source: 'https://www.flickr.com/photos/pagedooley/15058410632/'
  }
];
​
var imgTpl = document.getElementById('img-tpl').textContent;
​
var imagesHTML = images.map(function(img) {
  return imgTpl.replace(/\${imgW}/, img.w)
               .replace(/\${imgH}/, img.h)
               .replace(/\${imgRatio}/, Math.floor(img.h * 1000 / img.w) / 10)
               .replace(/\${imgSurl}/, img.img.replace('.jpg', '_t.jpg'))
               .replace(/\${imgLurl}/, img.img)
               .replace(/\${imgSource}/, img.source)
  ;
});
​
document.getElementById('imgs').innerHTML = imagesHTML.join('');
​
console.log('123');
console.log('123');
console.log('123');
console.log('123');
console.log('333', LazyBlur);
​
​
​
setTimeout(function() {
new LazyBlur({
//   eventType: 'scroll',
//   eventType: 'click',
//   eventType: 'mouseenter',
  filterSelector: 'html.svg .lazy-blur__imgS',
  onLoad: function (imgS) {
    imgS.parentElement.className += ' done ';
//     setTimeout(function () { imgS.remove(); }, 1000); // avoid re-painting
  }
});
}, 500);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Rpluspro
0viewers