[英]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.