Framework7 - Carga diferida

Descripción

La carga diferida, cuando se usa para archivos multimedia de gran tamaño, tarda en cargarse, como imágenes, videos, etc.

Ejemplo

El siguiente ejemplo demuestra el uso de la carga diferida, que carga las imágenes activando el evento 'lazy' en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

  • Guarde el código HTML proporcionado anteriormente como lazy_loading.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/lazy_loading.html y se muestra la salida como se muestra a continuación.

  • El ejemplo demuestra la carga diferida cuando está utilizando archivos multimedia de gran tamaño como imágenes, videos, etc.