브라우저가 페이지를 다운로드하는 동안 Twitter 부트 스트랩 진행 표시 줄을 표시 할 수 있습니까?

Question

많은 이미지가있는 사이트가 있고 모든로드 중 트위터 부트 스트랩 진행 표시 줄을 표시하고 싶습니다.

가능합니까? jquery는 페이지로드 진행 상황을 추적 할 수 있습니까?

모든 CSS, js 및 이미지 등을 다운로드 할 때까지 진행률 표시 줄 만 표시하고 싶습니다.

Answer 1

당신은이 같은 시도 할 수 있습니다 :

HTML을

<div class="progress progress-striped active"> 
    <div class="bar"></div> 
</div> 

<div class="imagelist"> 
    <img src="http://studio7designs.com/wp-content/uploads/green-grass.jpeg"/> 
    <img src="http://studio7designs.com/wp-content/uploads/rowboat-600x398.jpg"/> 
    <img src="http://studio7designs.com/wp-content/uploads/blue-wheat-grass.jpeg"/> 
    <img src="http://studio7designs.com/wp-content/uploads/rocks.jpg"/> 
    <img src="http://studio7designs.com/wp-content/uploads/sun-grass-golden.jpg"/> 
    <img src="http://studio7designs.com/wp-content/uploads/blue-water-photo.jpg"/> 
    <img src="http://studio7designs.com/wp-content/uploads/flight.jpg"/> 
</div> 

자바 스크립트

$.fn.imagesLoaded = function (callback, onEach) { 
    var elems = this.filter('img'), 
     len = elems.length, 
     blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 

    elems.bind('load.imgloaded', function() { 
     if(typeof onEach === 'function'){ 
      onEach(len, elems.length); // runs on every image load 
     } 

     if (--len <= 0 && this.src !== blank) { 
      elems.unbind('load.imgloaded'); 
      callback.call(elems, this); 
     } 
    }).each(function() { 
     // cached images don't fire load sometimes, so we reset src. 
     if (this.complete || this.complete === undefined) { 
      var src = this.src; 
      // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 
      // data uri bypasses webkit log warning (thx doug jones) 
      this.src = blank; 
      this.src = src; 
     } 
    }); 

    return this; 
}; 

$(document).ready(function() { 
    var progress = $('.progress'); 
    var progressbar = progress.children('.bar'); 

    $('.imagelist img').imagesLoaded(function() { 
     progressbar.width('100%'); 
     progress.fadeOut(); 
    }, function (left, total) { 
     progressbar.width((total - left)/total * 100 + '%'); 
    }); 
}); 

나는 폴 아일랜드어로 쓰여진 .imagesLoaded() 코드를 가져다의 추가 콜백을 추가 이미지가로드 될 때마다 트리거됩니다. 로드 된 모든 이미지에 대해 진행률 표시 줄이 진행됩니다.

로드하는 특정 파일의 양을 추적하지 않기 때문에 완전히 정확하지 않습니다.이 코드를 복잡하게하지 않으면 가능하지 않을 수 있습니다. 따라서 이미지가로드 될 때 진행 막대 만 변경됩니다. 로드하는 동안.

나는이 도움이되기를 바랍니다.