Question

我有这个代码，因为它将包含许多图像，我想阻止在页面加载时加载这些图像以减少页面加载时间。我的想法是阻止此代码运行，除非用户通过单击按钮要求这样做。因此，仅在用户想要查看图像时加载图像。

<div style="margin-top:40px;">
  <h3><a href='{parse url="showuser={$member['member_id']}&amp;tab=jawards" seotitle="{$member['members_seo_name']}" template="showuser" base="public"}'>{$this->lang->words['awards_title_post']}</a></h3>
  <div class="row2" style="padding:7px;">
    <foreach loop="profileawards:$awards as $a">
          <img class="tooltip" src='{$this->settings['upload_url']}/jawards/{$a['icon']}'
          <if test="size:|:$a['width']">
              width='{$a['width']}' height='{$a['height']}'
          </if>
          <if test="toolTip:|:$a['toolTip']">
              title='{$a['toolTip']}'
          </if>
          />
         <if test="awardCount:|:$a['count'] > 1">
             <span class='JLogicaAwardsCount'>{$a['count']}</span>
         </if>
         {$a['hook']['settings']['padding']}
    </foreach>
  </div>
</div>

Answer 1

您可以尝试以下js

  <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><<<< this goes in the header 
    </script>
    <script>
    $(document).ready(function(){
      $(".button").click(function(){
        $(".hiddendiv").slideToggle();
      });
    });
    </script>
    </head>
    <body>



    <input type="button" class="button" >123</button>
        <div class="hiddendiv">
             your data to show
        </div>
     </div>
    </body>

    <style>
        .hiddendiv { 
    display:none;
    }
</style>

Answer 2

无论您希望仅在用户点击按钮时显示哪些数据，请在javascript变量中收集它。

var myHeavHtml = ""; \\all data with images.

假设页面上有按钮id btnLoadImages

var isImagesLoaded = false;
$('#btnLoadImage').on('click', function(e)
{
    if(!isImagesLoaded)
    {
       $('#imgContainer').html(myHeavyHtml);
       isImagesLoaded = true;
    }
    else
    {
       $('#imgContainer').toggle();
    }
});

在页面加载时，声明变量isImagesLoaded设置为false，表示您尚未加载图像。因此，当它为假时，将html添加到容器div。所有其他时间，只需切换隐藏＆amp;秀。

通过这种方式，页面加载时不会加载图像，只有在单击按钮时才会插入图像。

希望这足以满足您的要求。

仅在单击按钮时加载HTML元素

2 个答案: