Framework7 - отложенная загрузка

Описание

Ленивая загрузка задерживает процесс загрузки изображения на данной странице. Ленивая загрузка с прокруткой повышает производительность, ускоряет загрузку страницы и экономит трафик.

Для правильной работы элементы и изображения с отложенной загрузкой должны находиться внутри прокручиваемого <div class = "page-content">.

В следующей таблице показано использование отложенной загрузки -

S.No	Ленивая загрузка и описание использования
1	Применение Ленивая загрузка может применяться к изображениям, фоновым изображениям и с эффектом постепенного появления.
2	Введенная вручную отложенная загрузка После инициализации страницы, если вы добавляете изображения с отложенной загрузкой вручную, ленивая загрузка не будет работать, и вам необходимо использовать методы для ее инициализации.

Можно вручную запустить загрузку изображения, используя ленивое событие в примере / элементе, как показано ниже -

$$('img.lazy').trigger('lazy');

$$('div.lazy').trigger('lazy');

пример

В следующем примере демонстрируется использование отложенной загрузки Framework7 -

<!DOCTYPE html>
<html class = "with-statusbar-overlay">

   <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 Load</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 Load</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p> <img data-src = "/framework7/images/pic4.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                           
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                              pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic5.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Sed ut perspiciatis unde omnis iste natus error sit 
                              voluptatem accusantium doloremque laudantium, totam rem aperiam, 
                              eaque ipsa quae ab illo inventore veritatis et quasi architecto 
                              beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
                              voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
                              magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                           
                           <p> <img data-src = "/framework7/images/background.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                              pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic6.jpg"
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 
                              illo inventore veritatis et quasi architecto beatae vitae dicta sunt 
                              explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut 
                              odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
                              voluptatem sequi nesciunt.</p>
                           
                           <p> <img data-src = "/framework7/images/pic7.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                              pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic8.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                              Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus 
                              id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus. 
                              Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor 
                              tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est 
                              sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
                           
                           <p><b>Using as background image:</b></p>
                           
                           <div data-background = "/framework7/images/pic7.jpg" 
                              style = "background: #aaa; height:60vw; background-size-cover" 
                              class = "lazy lazy-fadeIn">
                           </div>
                           
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 
                              illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
                              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
                              sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 
                              nesciunt.</p>
                        </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>
      
      <script>var myApp = new Framework7();</script>
   </body>

</html>

вывод

Давайте выполним следующие шаги, указанные выше, чтобы увидеть, как работает код:

Сохраните указанный выше HTML-код как framework7_lazy_load.html файл в корневой папке вашего сервера.
Откройте этот HTML-файл как http: //localhost/framework7_lazy_load.html, и результат отобразится, как показано ниже.
В примере указывается отложенная загрузка изображений, при которой изображения будут загружаться на страницу при их прокрутке вниз.