Imagefill javascript滞后

我正在使用imagefill（）插件

您可以看到，当站点加载图像时，它首先在顶部加载图像，然后插件启动，图像将自身重新定位到它应该位于的位置。你知道我怎样才能在页面加载后不出现任何延迟的情况下尽快实现这一点吗

我曾尝试将图像的分辨率降低到70kb，但仍然发生了这种情况，所以我认为这与图像大小无关

下面的代码。。。 谢谢

用于imagefill的Javascipt

var $container = this,
    imageAspect = 1/1,
    containersH = 0,
    containersW = 0,
    defaults = {
      runOnce: false,
      target: 'img',
      throttle : 200  // 5fps
    },
    settings = $.extend({}, defaults, options);

var $img = $container.find(settings.target).addClass('loading').css({'position':'absolute'});

// make sure container isn't position:static
var containerPos = $container.css('position');
$container.css({'overflow':'hidden','position':(containerPos === 'static') ? 'relative' : containerPos});

// set containerH, containerW
$container.each(function() {
  containersH += $(this).outerHeight();
  containersW += $(this).outerWidth();
});

// wait for image to load, then fit it inside the container
$container.imagesLoaded().done(function(img) {
  imageAspect = $img.width() / $img.height();
  $img.removeClass('loading');
  fitImages();
  if (!settings.runOnce) {
    checkSizeChange();
  }
});

function fitImages() {
  containersH  = 0;
  containersW = 0;
  $container.each(function() {
    imageAspect = $(this).find(settings.target).width() / $(this).find(settings.target).height();
    var containerW = $(this).outerWidth(),
        containerH = $(this).outerHeight();
    containersH += $(this).outerHeight();
    containersW += $(this).outerWidth();

    var containerAspect = containerW/containerH;
    if (containerAspect < imageAspect) {
      // taller
      $(this).find(settings.target).css({
          width: 'auto',
          height: containerH,
          top:0,
          left:-(containerH*imageAspect-containerW)/2
        });
    } else {
      // wider
      $(this).find(settings.target).css({
          width: containerW,
          height: 'auto',
          top:-(containerW/imageAspect-containerH)/2,
          left:0
        });
    }
  });
}

function checkSizeChange() {
  var checkW = 0,
      checkH = 0;
  $container.each(function() {
    checkH += $(this).outerHeight();
    checkW += $(this).outerWidth();
  });
  if (containersH !== checkH || containersW !== checkW) {
    fitImages();
  }
  setTimeout(checkSizeChange, settings.throttle);
}

return this;

var$container=this，
imageAspect=1/1，
集装箱船=0，
集装箱W=0，
默认值={
runOnce:错，
目标：“img”，
油门：200//5fps
},
设置=$.extend（{}，默认值，选项）；
var$img=$container.find（settings.target）.addClass（'load'）.css（{'position'：'absolute'}）；
//确保容器未处于“静态”位置
var containerPos=$container.css（'position'）；
$container.css（{'overflow'：'hidden'，'position'：（containerPos=='static'）？'relative'：containerPos}）；
//设置容器器，容器器
$container.each（函数（）{
集装箱船+=$（this）.outerHeight（）；
containersW+=$（this）.outerWidth（）；
});
//等待图像加载，然后将其装入容器中
$container.imagesLoaded（）.done（函数（img）{
imageAspect=$img.width（）/$img.height（）；
$img.removeClass（'load'）；
fitImages（）；
如果（！settings.runOnce）{
checkSizeChange（）；
}
});
函数fitImages（）{
集装箱船=0；
集装箱W=0；
$container.each（函数（）{
imageAspect=$（this.find（settings.target）.width（）/$（this.find（settings.target）.height（）；
var containerW=$（this）.outerWidth（），
containerH=$（this.outerHeight（）；
集装箱船+=$（this）.outerHeight（）；
containersW+=$（this）.outerWidth（）；
var containerAspect=集装箱工人/集装箱工人；
if（ContainerSpect

函数运行它-$（'.header image'）.imagefill（）

它所在的容器-div class=“header image”

---

标题图像的Css（在添加javascript样式之前）-高度：285px；溢出：隐藏；边缘顶部：170px

它使用imagesloaded.pkgd.min.js和jquery-imagefill.js，并由$（'.header image'）.imagefill（）执行然后，根据图像周围容器的高度（285px）和宽度（100%）将图像居中，并添加适当的代码