延迟加载（Lazy Load）

优质

小牛编辑

130浏览

2023-12-01

描述 (Description)

延迟加载延迟一个给定的网页上您的图像加载过程。延迟加载滚动提高性能，加快页面加载，节省流量。

懒惰负载元件和图像必须是内部滚动
正常工作。

下表显示了使用延迟加载的 -

S.No	懒惰负载和使用说明
1	Usage 延迟加载可以应用到图像，背景图像和与淡入效果。
2	Init Lazy Load Manually 初始化页面后，如果您添加延迟加载图像手动然后，延迟加载将无法正常工作，你需要使用方法来初始化。

它可以手动，通过使用触发图像加载lazy如下所示实施例/元件上事件-

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

例子 (Example)

下面的例子演示了如何使用延迟加载的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>

输出 (Output)

让我们来进行上面给出看看代码是如何工作的以下步骤 -

保存上面给出的HTML代码framework7_lazy_load.html文件服务器在你的根文件夹。
打开这个HTML文件为http://localhost/framework7_lazy_load.html和如下所示被显示的输出。
这个例子指定了图像将在网页上滚动时下来得到加载图像延迟加载。