framework7教程

Framework7 延迟加载

说明

延迟加载会延迟您在给定页面上的图像加载过程。延迟加载可提高滚动性能、加快页面加载速度并节省流量。

延迟加载元素和图像必须在可滚动的 <div class="page-content"> 内才能正常工作。

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

S.No	延迟加载用法和说明
1	用法延迟加载可应用于图像、背景图像和淡入效果。
2	手动初始化延迟加载初始化页面后，如果手动添加延迟加载图像，延迟加载将不起作用，您需要使用方法对其进行初始化。

可以通过在惰性图像/元素上使用 lazy 事件来手动触发图像加载，如下所示-

$('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，输出如下所示。该示例指定图像的延迟加载，当您向下滚动图像时，图像将被加载到页面上。

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< Framework7 通知 Framework7 颜色主题 >>

昵称：邮箱：