Question

我在我的应用程序中使用jquery BlocksIt插件，下面是我的代码

$(window).load( function() {
$('#container-pinterest').BlocksIt({
  numOfCol: 3,
  offsetX: 4,
  offsetY: 5,
  adjustWidth: true,
  blockElement: 'div'
});
  var currentWidth = 1100;
      var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
  conWidth = 440;
  col = 1;
} else if(winWidth < 880) {
  conWidth = 660;
  col = 2;
} else if(winWidth < 1100) {
  conWidth = 880;
  col = 3;
} else {
  conWidth = 1100;
  col = 3;
}
if(conWidth != currentWidth) {
  currentWidth = conWidth;
  $('#container-pinterest').width(conWidth);
  $('#container-pinterest').BlocksIt({
    numOfCol: col,
    offsetX: 4,
    offsetY: 12
  });
}
});

其实我在这里加载一些图片。在Chrome，Firefox，IE10和IE11中，它运行正常，但在IE9中，图像加载缓慢，BlocksIt功能无法正常工作。

当我再次刷新页面时，它工作正常。但第一次问题

任何帮助

Answer 1

尝试为图片添加特殊的onLoad侦听器

$("img").one("load", function () {
    /* your code here*/
    $(#container-pinterest).BlocksIt({
        numOfCol: 3,
        offsetX: 4,
        offsetY: 5,
        adjustWidth: true,
        blockElement: 'div'
    });
    /* your code here*/
}).each(function () {
    if (this.complete) $(this).load(); // if image is cached call onload manualy
});

由于窗口加载的时间早于图像，这就是导致问题的原因。

在ie9中第二次加载后页面正确显示

1 个答案: