Question

我已经编写了这个我从初学者jQuery书中学到的代码，它非常适合作为页面的预加载器，但我如何为它创建百分比（％）计数器？ - 根据装载的身体内容量？目前我只有一个动画GIF - 但我想要一些更先进的东西！：）

// Lets preload!
$(window).load(function() {
  $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

CSS：

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #009933 url(uploads/images/ajax-loader2.gif) center center no-repeat;
}

任何帮助将不胜感激！

感谢。

Answer 1

你可以用这样的东西伪造它（例如我正在使用图像）：

var percentCounter = 0;

$.each(arrayOfImageUrls, function(index, value) {
    $('<img></img>').attr('src', value)    //load image
        .load(function() {
            percentCounter = (index / arrayOfImageUrls.length) * 100;    //set the percentCounter after this image has loaded
            $('#yourProgressContainer').text(percentCounter + '%');
        });
});

Answer 2

这jQuery plugin可能会有所帮助。

Answer 3

我在我的网站上使用this plug-in ...也许你也可以。

如何使用百分比计数器创建jQuery预加载器？

3 个答案: