미리로드 페이지 자리 표시 자 jQuery 플러그인

Question

페이지가로드되는 동안 "로딩"자리 표시 자 상자를 표시하려면 페이지 상단에 포함시킬 수있는 js 파일을 찾았습니다. 문제는 차트와 같은 다른 요소를로드하는 데 오래 걸리면 차트가로드되지 않아도이 자리 표시자가 페이지에 표시되지 않습니다. 모든 요소를 ​​포함하여 페이지의 100 %가로드 될 때까지이 자리 표시자를 유지하도록이 코드를 수정하는 방법이 있습니까? 모두로드 될 때까지로드 진행률을 표시하는 브라우저와 유사합니다.

다음은이 JS 파일에 대한 코드입니다 :

var jQueryLoaderOptions = null; 
(function(a) { 
    a.loader = function(d) { 
     switch (d) { 
     case "close": 
      if (jQueryLoaderOptions) { 
       if (a("#" + jQueryLoaderOptions.id)) { 
        a("#" + jQueryLoaderOptions.id + ", #" + jQueryLoaderOptions.background.id).remove() 
       } 
      } 
      return; 
      break; 
     case "setContent": 
      if (jQueryLoaderOptions) { 
       if (a("#" + jQueryLoaderOptions.id)) { 
        if (a.loader.arguments.length == 2) { 
         a("#" + jQueryLoaderOptions.id).html(a.loader.arguments[1]) 
        } else { 
         if (console) { 
          console.error("setContent method must have 2 arguments $.loader('setContent', 'new content');") 
         } else { 
          alert("setContent method must have 2 arguments $.loader('setContent', 'new content');") 
         } 
        } 
       } 
      } 
      return; 
      break; 
     default: 
      var b = a.extend({ 
       content: "<div>Loading ...</div>", 
       className: "loader", 
       id: "jquery-loader", 
       height: 70, 
       width: 70, 
       zIndex: 30000, 
       background: { 
        opacity: 0.4, 
        id: "jquery-loader-background" 
       } 
      }, d) 
     } 
     jQueryLoaderOptions = b; 
     var c = a(document).height(); 
     var e = a(window).width(); 
     var g = a('<div id="' + b.background.id + '"/>'); 
     g.css({ 
      zIndex: b.zIndex, 
      position: "absolute", 
      top: "0px", 
      left: "0px", 
      width: e, 
      height: c, 
      opacity: b.background.opacity 
     }); 
     g.appendTo("body"); 
     if (jQuery.bgiframe) { 
      g.bgiframe() 
     } 
     var f = a('<div id="' + b.id + '" class="' + b.className + '"></div>'); 
     f.css({ 
      zIndex: b.zIndex + 1, 
      width: b.width, 
      height: b.height 
     }); 
     f.appendTo("body"); 
     f.center(); 
     a(b.content).appendTo(f) 
    }; 
    a.fn.center = function() { 
     this.css("position", "absolute"); 
     this.css("top", (a(window).height() - this.outerHeight())/2 + a(window).scrollTop() + "px"); 
     this.css("left", (a(window).width() - this.outerWidth())/2 + a(window).scrollLeft() + "px"); 
     return this 
    } 
})(jQuery); 

과 같이 호출 :

이

$(".preloader").click(function(){ $.loader({ className:"ajLoad", content:"" }); }); 

Answer 1

당신은 아마 사용중인 플러그인 그냥 document.ready 함수를 기다립니다. 호출 한 사용자 정의 이벤트를 수신하도록 코드를 수정하고 코드가 document.ready 또는 페이지의 마지막 요소가로드 될 때 코드가 실행되도록해야합니다.

이 코드는 작동하지만 복잡한 코드 일 수 있습니다. 페이지에 내용이로드되어 있어야합니다.

Answer 2

이 자리 표시자를 유지하기 위해이 코드를 수정하여 페이지의 100 % (모든 요소 포함)까지로드 할 수 있습니까? 모두로드 될 때까지로드 진행률을 표시하는 브라우저 과 유사합니다.

당신은

$(window).load(function() { 
    // put your code here... 

}); 
// NB : put this code before your </head>