English 中文(简体)
Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Lazy Load
  • 时间：2024-12-22

Framework7 - Lazy Load

Previous Page Next Page  

Description

Lazy loading delays your image loading process on a given page. Lazy loading improves scrolpng performance, speeds page load and saves traffic.

Lazy load elements and images must be inside of scrollable <span class = "page-content"> to work properly.

The following table demonstrates the use of lazy load −

S.No Lazy load usage & Description
1 Usage

The lazy load can be appped to images, background images and with fade-in effect.
2 Init Lazy Load Manually

After initiapzing a page, if you add lazy load images manually then, lazy load will not work and you need to use methods to initiapze it.

It is possible to trigger image loading manually by using lazy event on lazy image/element as shown below −

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

$$( span.lazy ).trigger( lazy );

Example

The following example demonstrates the use of lazy loading in 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>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <span class = "views">
         <span class = "view view-main">
            <span class = "pages">
               <span data-page = "home" class = "page navbar-fixed">
                  
                  <span class = "navbar">
                     <span class = "navbar-inner">
                        <span class = "left"> </span>
                        <span class = "center">Lazy Load</span>
                        <span class = "right"> </span>
                     </span>
                  </span>
                  
                  <span class = "page-content">
                     <span class = "content-block">
                        <span 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 ept, 
                              sed do eiusmod tempor incididunt ut labore et dolore magna apqua. 
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                              nisi ut apquip ex ea commodo consequat. Duis aute irure dolor in 
                              reprehenderit in voluptate vept 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 exppcabo. 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 ept, 
                              sed do eiusmod tempor incididunt ut labore et dolore magna apqua. 
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                              nisi ut apquip ex ea commodo consequat. Duis aute irure dolor in 
                              reprehenderit in voluptate vept 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 
                              exppcabo. 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 ept, 
                              sed do eiusmod tempor incididunt ut labore et dolore magna apqua. 
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                              nisi ut apquip ex ea commodo consequat. Duis aute irure dolor in 
                              reprehenderit in voluptate vept 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 ept. 
                              Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus 
                              id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus. 
                              Vestibulum suscipit tristique iacups. Nam vitae risus non eros auctor 
                              tincidunt quis vel nulla. Sed volutpat, pbero ac blandit vehicula, est 
                              sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
                           
                           <p><b>Using as background image:</b></p>
                           
                           <span data-background = "/framework7/images/pic7.jpg" 
                              style = "background: #aaa; height:60vw; background-size-cover" 
                              class = "lazy lazy-fadeIn">
                           </span>
                           
                           <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 exppcabo. 
                              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
                              sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 
                              nesciunt.</p>
                        </span>
                     </span>
                  </span>
                  
               </span>
            </span>
         </span>
      </span>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>var myApp = new Framework7();</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 framework7_lazy_load.html file in your server root folder.

    Open this HTML file as http://localhost/framework7_lazy_load.html and the output is displayed as shown below.

    The example specifies the lazy load of images where images will get loaded on the page when you scroll them down.