Framework7 - Lazy Loading

Description

The lazy loading, when used for large size multimedia files, takes time to load such as pictures, videos etc.

Example

The following example demonstrates the use of lazy loading, which loads the images by triggering 'lazy' event in Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Lazy Loading</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Lazy Loading</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "swiper-container">
                        <div class = "swiper-wrapper">
                           
                           <div class = "swiper-slide">
                              <img data-src = "http://lorempixel.com/1600/1200/nature/1" class = "swiper-lazy">
                              <div class = "preloader"></div>
                           </div>
                           
                           <div class = "swiper-slide">
                              <img data-src = "http://lorempixel.com/1600/1200/nature/2" class = "swiper-lazy">
                              <div class = "preloader"></div>
                           </div>
                           
                           <div class = "swiper-slide">
                              <img data-src = "http://lorempixel.com/1600/1200/nature/3" class = "swiper-lazy">
                              <div class = "preloader"></div>
                           </div>
                           
                           <div class = "swiper-slide">
                              <img data-src = "http://lorempixel.com/1600/1200/nature/4" class = "swiper-lazy">
                              <div class = "preloader"></div>
                           </div>
                           
                           <div class = "swiper-slide">
                              <img data-src = "http://lorempixel.com/1600/1200/nature/5" class = "swiper-lazy">
                              <div class = "preloader"></div>
                           </div>
                        </div>
                        
                        <div class = "swiper-pagination color-white"></div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <style>
         .swiper-container {
            height:100%;
         }
         
         .swiper-slide {
            background:#000;
            position:relative;
            height:100%;
         }
         
         .swiper-slide img {
            position:absolute;
            left:50%;
            top:50%;
            max-width:100%;
            max-height:100%;
            width:auto;
            height:auto;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
         }
      </style>
      
      <script>
         var myApp = new Framework7();
         
         var mySwiper = new Swiper('.swiper-container', {
            preloadImages: false,
            lazyLoading: true,
            pagination: '.swiper-pagination'
         })
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as lazy_loading.html file in your server root folder.

  • Open this HTML file as http://localhost/lazy_loading.html and output as below gets displayed.

  • The example demonstrates the lazy loading when you are using the large size multimedia files such as images, videos etc.

framework7_swiper_slider.htm
Advertisements