繁体   English   中英

在添加到DOM后不久在Jquery中调整图像大小?

[英]Resizing Images In Jquery Soon After Adding To The DOM?

我正在做这样的事情:

maxDim = 100;
$('div.images').html('<img class="pull" src="'+imgs[img_i]+'" />');
$('img.pull').each(function(i){
  if( $(this).height() > $(this).width() ){
    var h = maxDim;
    var w = Math.ceil( $(this).width() / $(this).height() * maxDim);
  }
  else{
    var w = maxDim;
    var h = Math.ceil( $(this).height() / $(this).width() * maxDim);
  }
  $(this).css({height:h, width:w});
});

现在我很确定图像大小调整部分很好......特别是因为它符合这个答案http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/

有时它有效的问题,有时它没有。 (它有时会显示原始分辨率并在其他分辨率上重新调整)似乎时间是真正的问题。 也许在图像实际进入DOM之前调用大小调整以便在之后再次选择它? 你们有任何建议将不胜感激。

我猜有时候图像没有加载。 在这种情况下,原始大小仍然是未知的(0),并且由于除以零,计算导致NaN值。

当图像的加载事件触发时调整大小应该是一个选项。

您将需要特殊的图像加载事件插件 否则,如果图像已经在浏览器的缓存中,则不会触发事件。 然后你可以这样做:

$('img.pull').load(function(i){
    // ...
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM