ブートストラップモードを開いた後にレイジーロードイメージ

Question

私はここで2つの同様の答えを見つけましたが、私の状況（私の状況にそれらを翻訳する能力が限られている）で両方が失敗しました。かなり大きな画像がたくさんあるページがあり、ブートストラップのデフォルトの方法は、ページの読み込み時にすべてのモーダル画像を読み込むことです。目に見えるhtmlはかなり速くレンダリングされます（私はそのためのスピナーを持っています）が、非表示モーダルの追加読み込み時間はページを非実用的にします。私は、ページロードを完了してスピナーをクリアするために、目に見える（非モーダル）コンテンツのみをロードするようにして、そのモーダルが起動されたときにのみ各モーダルのコンテンツをロードします。私は見つけることができるすべてのlazyloadソリューションを試しましたが、イメージはモーダルでレンダリングされません（ 'data-src'プレースホルダはレンダリングされますが、それらを置き換えるはずの 'src'イメージはレンダリングされません）。私は、モーダルの大きな画像、 'モーダルボディ'クラスのものをlazyload（または 'show.bs.modal'にロードする）したいだけです。私はこれが十分明確であることを望む。

サンプルコード：まず

/* Javascript placed in the head */ 

<script> 

function lazyLoad(){ 
    var $images = $('.lazy_load'); 

    $images.each(function(){ 
     var $img = $(this), 
      src = $img.attr('data-src'); 

     $img 
      .on('load',imgLoaded($img[0])) 
      .attr('src',src); 
     }); 
    }; 

    $('.modal-body').on("show.bs.modal", function() { 
    lazyLoad(); 
};   

</script> 

/* HTML in the modal section */ 


<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> 
     <div class="modal-content"> 
      <div class="galleryheader"> 
       <img src="headerimage_1.png" height="77" width="1024"> 
      </div> 
      <div class="close-modal" data-dismiss="modal"> 
       <div class="lr"> 
        <div class="rl"> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div> 
         <div class="modal-body lazy_load"> 
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/> 
         </div> 
         <div class="modal-body lazy_load"> 
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/> 
         </div> 
         <div class="modal-body lazy_load"> 
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/> 
         </div> 
        </div> 
       </div> 
      </div> 

       <div class="close-lower" data-dismiss="modal"> 
       <IMG SRC="images/close.jpg" WIDTH="85" HEIGHT="32"></a> 
       </div> 
      </div> 
     </div> 
</div> 

Answer 1

、img要素ではなく、親divにlazy_loadクラスを置きます。第二に、あなたが必要とするjQueryのは、このようなものです：

$('.portfolio-modal').on("show.bs.modal", function() { 
    $('.lazy_load').each(function(){ 
     var img = $(this); 
     img.attr('src', img.data('src')); 
    }); 
});   

注：

1. は、モーダルを識別するためにportfolio-modalクラスを使用します。
2. jQuery data()メソッドを使用して、イメージを遅延読み込みさせます。