Framework7-遅延ロード

説明

遅延読み込みは、特定のページでの画像読み込みプロセスを遅らせます。遅延読み込みは、スクロールのパフォーマンスを向上させ、ページの読み込みを高速化し、トラフィックを節約します。

'_遅延読み込みの要素と画像は、適切に機能するためにスクロール可能な<div class = "page-content">内になければなりません。_

次の表は、遅延ロードの使用を示しています-

S.No

Lazy load usage & Description

1

Usage

遅延ロードは、画像、背景画像、およびフェードイン効果に適用できます。

2

Init Lazy Load Manually

ページを初期化した後、レイジーロードイメージを手動で追加した場合、レイジーロードは機能せず、メソッドを使用して初期化する必要があります。

以下に示すように、遅延イメージ/要素で_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_loadl ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/framework7_lazy_loadlとして開くと、出力は以下のように表示されます。
この例では、画像の遅延読み込みを指定します。画像をスクロールダウンすると、ページに画像が読み込まれます。

Framework7-lazy-load

目次

Framework7-遅延ロード

説明

例

出力

Framework7-lazy-load

Framework7-遅延ロー​​ド

説明

例

出力

Framework7-遅延ロード