Question

我正在使用插件imagefill（http://johnpolacek.github.io/imagefill.js/）。

您可以看到网站何时加载它最初将图像加载到顶部然后插件触发，图像将自身重新定位到应该的位置。我知道如果页面加载没有任何延迟我怎么能发生这种情况呢？

我试图将图像的分辨率降低到70kb但仍然发生，所以不要认为它与图像尺寸有任何关系。

以下代码...... 谢谢！

Javascipt for imagefill

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;

运行它的功能 - $（＆＃39; .header-image＆＃39;）。imagefill（）;

它所在的容器 - div class =＆＃34; header-image＆＃34;

用于标题图像的Css（在添加javascript样式之前） - 高度：285px;溢出：隐藏; margin-top：170px;

图像填充javascript滞后

0 个答案: