버튼을 클릭 할 때까지 html의 일부분을로드하지 마십시오.

Question

정보 컨테이너가 하나 뿐인 한 페이지를 만듭니다. 사용자가 왼쪽의 특정 버튼을 클릭하면 컨테이너의 내용이 전환됩니다. 그러나이 순간 사이트는 각 콘텐츠 부분을로드합니다. 그 중 하나는 내 포트폴리오를 포함하며, 이는 큰 이미지 컬렉션이 될 것입니다. 이로 인해 사이트가 빠르게로드되지 않습니다.

해당 div의 콘텐츠를 보여주는 버튼이 클릭 될 때까지 특정로드의 내용을 만들고 싶지 않습니다. 내가 달성하기 위해 노력하고있어의 빠른 예를 들어

:
방문 http://iscs.nl/testpage_changecontent.html

시작할 때로드 할 수 없습니다해야 DIV의 내용은 클릭하여 표시됩니다 #page_portfolio 입니다 button #pagebutton_portfolio 참고 :이 ID는 위 링크의 testpage에서 사용되지 않습니다.

고맙습니다. 코드를 찾아보세요.

Answer 1

portfolio.html에 있었다 :

$('#tabcontent2').click(function(e){ 
    $('#content_1').hide(); 
    $("#content_2").show() 
    // grab portoflio.html and place its contents within #content_2 
    .load('portfolio.html'); 
    e.preventDefault(); 
}); 

당신도 (한 번 가져 오기) 페이지를 다시로드하지 않도록 data-* 속성을 사용할 수 있습니다 :

이

$('#tabcontent1').click(function(e){ 
    $('#content_2').hide(); 
    $('#content_1').show(); 
    e.preventDefault(); 
}); 
$('#tabcontent2').click(function(e){ 
    $('#content_1').hide(); 

    var $content2 = $("#content_2").show(); 

    // check if it's been loaded before 
    if (!($('#content_2').data('loaded') || false)){ 
    // grab portoflio.html and place its contents within #content_2 
    $content2.load('portfolio.html', function(){ 
     // set the flag to say we've already loaded this content 
     $content2.data('loaded',true); 
    }); 
    } 
    e.preventDefault(); 
}); 

Answer 2

콘텐츠를로드하는 데 아약스를 사용합니다. PHP 파일이 필요하지만 js 이벤트가 실행될 때만 실행됩니다. 포트폴리오의 컨텐츠를 가정

는

Answer 3

여기에 하나의 특별히 당신을위한 간단한 결정.

1. 콘텐츠가 포함 된 두 개의 파일 (레이아웃 없음)을 서버에 저장하십시오. 마지막으로

   function replace(content) { 
       $('#content').html(content); 
       $('#content').show(); 
   } 
   
   $('#tabbutton1').click(function() { 
       $.get("content1.html", replace(content)); 
       $('#content').hide(); 
   }); 
   
   $('#tabbutton2').click(function() { 
       $.get("content2.html", replace(content)); 
       $('#content').hide(); 
   }); 
   

2. 를 ID로 하나의 사업부로 IDS "content_1"와 "content_2"로 div의 대체 : 예, content1.html 및 content2.html

3. 이 하나 기존의 JS 코드를 교체 = "내용"

   <div id="content">The text displayed until the user clicks any link</div> 
   

감사합니다.