Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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">
        </div>
      </figure>
    </script>
  </body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers