Загрузка элементов HTML только при нажатии кнопки

-2

У меня есть этот код, и поскольку он будет содержать много изображений, я хотел бы предотвратить загрузку этих изображений при загрузке страницы, чтобы уменьшить время загрузки страницы. Моя идея состояла в том, чтобы предотвратить запуск этого кода, если пользователь не попросит этого, нажав кнопку. Таким образом, загрузка изображений происходит только тогда, когда пользователь хочет их видеть.Загрузка элементов HTML только при нажатии кнопки

<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>

источник

2016-06-04 Anthony

Сделайте вызов Ajax. Попробуйте, а затем задайте вопрос, просто попросите других написать код для вас, не показывая, что попытка не в духе переполнения стека. –

@JuanMendes, Да Ajax также будет работать. Но я думаю, что то, что я отправил в качестве ответа, будет достаточно для его требования более простым способом: –

@Juan Mendes, если бы я знал, как это сделать, я бы не стал задавать этот вопрос. :) – Anthony

Вы можете попробовать следующие 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>

источник

2016-06-04 12:11:23

Благодарим вас за ответ @Jkumar. Мое намерение состояло в том, чтобы полностью не загружать код. Скрытие этого работает, но я хотел бы ускорить загрузку страницы, уменьшив количество загружаемых браузером изображений. Скрытие будет по-прежнему загружать эти изображения. – Anthony

Независимо от данных, которые вы хотите показать только тогда, когда пользователь нажимает на кнопку, собирать его в яваскрипте переменного.

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

Say есть кнопка на странице Ид btnLoadImages

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

На странице загрузки, объявить переменную isImagesLoaded значение ЛОЖЬ, означает, что вы не загрузили изображения. Поэтому, когда он является ложным, добавьте html в контейнер div. Еще раз, просто переключите скрытие &.

Таким образом, изображения не будут загружаться при загрузке страницы, они будут вставлены только при нажатии кнопки.

Надеюсь, этого достаточно ваших требований.

источник

2016-06-04 12:19:24

Загрузка элементов HTML только при нажатии кнопки

ответ

Смежные вопросы