时间戳

首页 > 解决方案 > 加载延迟加载内容所需的 JS 脚本

javascript - 加载延迟加载内容所需的 JS 脚本

问题描述

在页面完全加载后，我遇到了为我的延迟加载内容加载 JS 脚本的问题。

请通过我的代码

/*JS Which Runs on LoadMore button Clicks*/

$.ajax({
        method :'GET',
        url: baseUrl+'ajaxcontroller/Load_Categories_To_View',
        success:function(data){
        $('#searchResults').append(data);
        //scriptLoader('#scripts');
        $('#loadingImage2').hide();
        },
        complete: function(){
        $('#loadingImage2').hide();
         $("#loadMore").show();
        },
        error:function (xhr, ajaxOptions, thrownError)    {alert(thrownError);}
        });
<!-SEARCH RESULTS PAGE-->

<!doctype html>
<html lang="en">
<head>
	
</head>
 <body>
 

  	<section class="content">
    	<section class="block">
      	<div class="container">
        <!----------------------------------------------Ads---------------------------------------------------->
        <?php if(!empty($headerdata[0]['homepageAds720x90']) && $headerdata[0]['enable_ads']==1){ ?>
        <section class="block" align="center">
             <?php $this->load->view('ads/homepageAds720x90'); ?>
        </section>
        <?php }?>
        <!------------------------------------------------------------------------------------------------------>

        <!-------------------------------------------Search Product Page---------------------------------------->
        <div id="loadingImage" align="center" style="display:none;"> <img src="<?php echo base_url();?>assets/img/loadingimage.gif"/> </div>
        <div id="searchResults"><div id="scripts"></div></div>
        <div id="loadMore" style="">
          <a href="#"><?php echo $this->lang->line('loadmore_btn'); ?></a>
        </div>
        <!-------------------------------------------------------------------------------------------------------->

        </div>
    	</section>
	  </section>

	</div>
  <div id="backtop">&#9650;</div>

<!----------------------------------------------Page Scripts---------------------------------------------------------> 
<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!------------------------------------------------------------------------------------------------------------------->

</body>
</html>

正如我通过我的代码显示的那样，它将加载第一组结果，然后会有一个 loadMore 按钮，用户必须单击该按钮才能加载下一组结果。

一切都按预期工作，但问题是当用户单击“加载更多”按钮时，搜索结果页面中的 JS 脚本也会加载，每次用户单击“加载更多”按钮时都会重复。但是很容易我可以从我的搜索结果页面中删除以下脚本，但是没有任何页面功能适用于延迟加载的内容。因为要运行这些函数，每次用户单击 LoadMore 按钮时都应该加载lazyloadcontrols.js。

<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

所以我的问题是，有什么方法可以让我将这些 JS 脚本加载到我的主搜索页面，并将它们用于稍后当用户单击 LoadMore 按钮时我将加载的内容？基本上有什么方法可以让我将这些 JS 脚本应用于整个页面，而无需在每次用户加载结果时都复制它们？

提前致谢

标签： javascriptjqueryhtml

解决方案

我认为你的

<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>

应该在下面添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

推荐阅读