demo/index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Saveba.js Demo by Aurelio De Rosa</title>
      <style>
         body
         {
            margin-left: auto;
            margin-right: auto;
            max-width: 800px;
            font-size: 20px;
         }

         img
         {
            max-width: 100%;
         }

         #images
         {
            margin: 5px 0;
         }
      </style>
   </head>
   <body>
      <h1>Saveba.js Demo</h1>

      <div id="images">
         <p>
            London is the capital city of England and the United Kingdom. It is the most populous city in the United
            Kingdom with a metropolitan area of over 13 million inhabitants. One of its main attraction is the
            Big Ben, which is the nickname for the Great Bell of the clock at the north end of the Palace of
            Westminster. A photo of the Big Ben can be seen below:
         </p>
         <img id="image-1" src="images/photo-1.jpg" alt="" class="ignore" />
         <p>
            Barcelona is the capital city of the autonomous community of Catalonia in Spain and the country's 2nd
            largest city, with a population of 1.6 million within its administrative limits. One of the main attraction
            of this city is the Park Güell. From this park you can see a well-known sign, reading "Okupa y resiste",
            of a squat and anarchist center. An image of such sign is shown below:
         </p>
         <img id="image-2" src="images/photo-2.jpg" alt="Sign of Okupa y resiste in Barcelona" />
         <img id="image-3" src="images/photo-3.jpg" alt="" />
         <img id="image-4" src="http://upload.wikimedia.org/wikipedia/commons/7/74/Earth_poster_large.jpg" alt="" />
         <img id="image-5" src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg" alt="" />
      </div>

      <div>
         <a href="https://github.com/AurelioDeRosa/Saveba.js">Saveba.js</a> has been created by
         <a href="http://www.audero.it">Aurelio De Rosa</a>
         (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).
      </div>

      <script>
         // Try to fake a slow connection
         if ('connection' in window.navigator) {
            window.navigator.connection.metered = true;
         } else {
            window.navigator.connection = {
               type: 'bluetooth'
            }
         }
      </script>
      <script src="../src/saveba.js"></script>
      <script>
         // Ignore elements having class ignore
         saveba.defaults.ignoredElements = document.getElementsByClassName('ignore');

         // Only needed if the developer wants to allow the user to see the hidden images
         // in case they have been hidden (highly recommended)
         window.addEventListener('load', function() {
            var hiddenResources = document.querySelectorAll('[data-saveba]').length;
            if (hiddenResources) {
               var restoreLink, restoreParagraph, images;

               // Code to restore all images at once
               restoreLink = document.createElement('a');
               restoreLink.href = '#';
               restoreLink.textContent = 'click here';
               restoreLink.addEventListener('click', function(event) {
                  event.preventDefault();
                  event.target.parentNode.parentNode.removeChild(event.target.parentNode);
                  saveba.destroy();
               });

               restoreParagraph = document.createElement('p');
               restoreParagraph.textContent = 'It seems you are running on a slow connection (simulated). ' +
                       'To save you bandwidth, some images (' + hiddenResources + ') ' +
                       'have been hidden. If you want to load them all, ';
               restoreParagraph.appendChild(restoreLink);

               images = document.getElementById('images');
               images.parentNode.insertBefore(restoreParagraph, images);

               // Code to restore a specific set of images
               images = document.getElementById('image-2');

               restoreLink = document.createElement('a');
               restoreLink.href = '#';
               restoreLink.textContent = 'click here';
               restoreLink.addEventListener('click', function(event) {
                  event.preventDefault();
                  event.target.parentNode.parentNode.removeChild(event.target.parentNode);
                  saveba.destroy(images);
               });

               restoreParagraph = document.createElement('p');
               restoreParagraph.textContent = 'To show the image below ';
               restoreParagraph.appendChild(restoreLink);

               images.parentNode.insertBefore(restoreParagraph, images);
            }
         });
      </script>
   </body>
</html>