如何在使用延迟加载加载页面时使 jQuery 代码工作

Question

我有一些 div s，例如 facebook posts，并且 posts 正在使用延迟加载一次加载 6 posts。在每个 post 里面有评论有评论，我为评论添加了一个 jQuery 函数来显示/隐藏评论中的额外字符，如下面的 jQuery 代码所示。

问题是代码在前 6 post 秒内有效，但是当新的 posts 使用延迟加载加载时，我的代码不起作用，是否可以使此代码适用于所有 posts.

jQuery Code

let certainAmount = 5;
const $container = $('.main');

$container.each(function(){
  let $this = $(this);

  console.log($this.find('> *').length);

  if(($this.find('> *').length) > (certainAmount - 1) ) {
    //Selected and do something.
            i=0;
        $.each($('.main img'), function (index, value) {             
            i++;
            console.log('um inside'+i);
            $('.main img').css('display','block');
            $('.main img').css('float','left');
            $('.main img:nth-child(10)').nextAll().css('display','none');    

        });
     $('.main').has('>img:nth-child(5)').append("<a class='show-more'>See More</a>");
  }
});

<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
     <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
    <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>

Answer 1

您编写的代码是在页面加载时进行的，因此在加载文档时准备好的元素工作正常。

为了按预期工作，对于组件的延迟加载，您需要在使用延迟加载加载组件时实例化相同的方法。

如何在使用延迟加载加载页面时使 jQuery 代码工作

How to make jQuery code work when page loads using lazy load

javascript

jquery

lazy-loading

function

conditional-statements