버튼을 클릭 할 때만 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, Yes 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.

는 이미지를로드하지 않은 의미, 변수가 false로 설정 isImagesLoaded 신고 버튼을 눌러 페이지 ID의 btnLoadImages 페이지로드에

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

에이 말. 그래서 거짓 일 때 컨테이너 div에 html을 추가하십시오. 다른 모든 시간은 숨기기 & 표시를 토글합니다.

이렇게하면 페이지가로드 될 때 이미지가로드되지 않고 단추를 클릭 할 때만 이미지가 삽입됩니다.

희망 사항만으로도 충분합니다.

출처

2016-06-04 12:19:24

버튼을 클릭 할 때만 HTML 요소로드

답변

관련 문제