Question

작은 문제가 있습니다. 나는 div에 외부 페이지를 가져오고 있습니다. 콘텐츠가 채워지는 동안 로딩 이미지가 있지만 콘텐츠가로드되기 전에 곧 사라지고 콘텐츠가로드되기까지 몇 초의 간격이 있습니다. 어떤 제안?

$(document).ready(function() { 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>"; 
    $("#page_1").click(function(e) { 
     e.preventDefault(); 
     $("#content").html(ajax_load).load("page_1.html"); 
    }); 
    $("#page_2").click(function(e) { 
     e.preventDefault(); 
     $("#content").html(ajax_load).load("page_2.html"); 
    }); 
}); 

Answer 1

숨겨진 div에 콘텐츠를로드 한 다음 #content를 대체 할 수 있습니까? 이 같은

뭔가 :

$(function() 
{ 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>"; 

    $("#page_1").click(function(e) 
    { 
     e.preventDefault(); 
     $("#content").html(ajax_load); 
     var content = $('<div />').load("page_1.html"); 
     $('#content').html(content.html()); 
    }); 

    $("#page_2").click(function(e) 
    { 
     e.preventDefault(); 
     $("#content").html(ajax_load); 
     var content = $('<div />').load("page_2.html"); 
     $('#content').html(content.html()); 
    }); 
}); 

Answer 2

는 아래 시도하고 알려 :

$(document).ready(function() { 
// var ajax_load = "<img class='loading' src='img/loader_large.gif'/>"; 
     var img = new Image(); 
     img.className = 'loading'; 
     img='img/loader_large.gif'; 
    img.onload = function(){ 
     $("#page_1").click(function(e) { 
     e.preventDefault(); 

     // $("#content").html(ajax_load).load("page_1.html"); 
     $("#content").append(img).load("page_1.html"); 
     }); 
     $("#page_2").click(function(e) { 
     e.preventDefault(); 
     // $("#content").html(ajax_load).load("page_2.html"); 
     $("#content").append(img).load("page_2.html"); 
     }); 
    } 
}); 

Answer 3

나는 귀하의 콘텐츠가 가정 #content 요소

<div id="content"><img class='loading' style="display:none" src='img/loader_large.gif'/></div> 

에 숨겨진 이미지를 둘 것 사업부

을 숨기고 표시하려면 ajaxStart 및 ajaxStop을 사용하십시오.

 $(document).ajaxStart(function() { 
      $('.loading').show(); 
     }); 
     $(document).ajaxStop(function() { 
      $('.loading').hide(); 
     }); 

Answer 4

모든 일이 발생할 수 있고 카운터가 너무 빨리 완료 될 수 있기 때문에 카운터에 포함시킬 수 없습니다. 로딩 이미지가 정확히 어디에 있는지 알 수 없습니다. 나는 그것이 .html 파일의 어딘가에 있어야한다고 생각합니다. 그러나 아약스 호출이 있다고 말한 것처럼, 페이지가로드 된 후에 끝나기 때문에 다시 말해서 간격이 생깁니다. 모든 아약스 호출이 서로 의존하는 경우 중첩시키고 가장 마지막 호출에서 로딩을 제거하십시오. 이 방법으로 모든 컨텐츠가로드되도록 보장됩니다. 그러나 이러한 아약스 호출은 독립적 일 가능성이 큽니다. 그러면 카운터를 만들 수 있습니다. 일부 아약스 호출이 준비 될 때마다 카운터를 증가시킵니다. 카운터가 아약스 전화 번호와 같으면 로딩 이미지가 제거됩니다.

Answer 5

jQuery를 사용하면 별도의 처리기를 통해 문서에서 아약스 호출을 인식 할 수 있습니다. 그런 다음로드하는 GIF를 관리하고 원하는 순서대로 항목을 표시하거나 사라지게 할 수있는 곳은 한 곳뿐입니다.

Here is a jsfiddle demo.

뭔가처럼 될 것입니다 귀하의 예제에서 사용하려면 모든 사람의 입력

$(document).ready(function() { 

    // removed your .html(ajax_load) in these 
    $("#page_1").click(function(e) { 
     e.preventDefault(); 
     $("#content").load("page_1.html"); 
    }); 
    $("#page_2").click(function(e) { 
     e.preventDefault(); 
     $("#content").load("page_2.html"); 
    }); 

    // handlers for ajax events. 
    // just make a hidden container with your loader in it and this will show/hide as necessary 
    $(document).ajaxStart(function() { 
     $(".ajax-load-container").show(); 
    }).ajaxComplete(function() { 
     $(".ajax-load-container").hide(); 
    }); 
}); 

Answer 6

감사합니다, 몇 가지 새로운 방법을 알게 너무 감사합니다. 인 그램 데이터를로드하는 .js 파일에서로드가 끝납니다. 작품이 가장 효과적이 방법은 매우 간단하고, 내가 너무 오래 깨어 (생각 이상) 것 같아요.

이

.loader { text-align:center; } 

<div class="loader"></div>