Question

我正在使用这个jQuery插件来重新调整图像大小。 http://hirdet2.extra.hu/kepresize/。

$(document).ready(function(){
            $('#content img').kepresize({maxWidth: 200,maxHeight: 150});
            ....
            ....
            $('#content').append('<img src="pathtofile"/>');
});

但是，这些图像仅在文档加载后附加，具体取决于用户操作。因此，附加图像不会被重新调整大小。

我玩过.live（），但似乎无法正确使用。

非常感谢任何帮助。

Answer 1

添加图片后调用kepresize。

如果您要动态附加许多图像，则可能在添加之前调整每个图像的大小。

var img = $('<img src="pathtofile"/>').kepresize({maxWidth: 200,maxHeight: 150});
$('#content').append(img);

Answer 2

最简单的方法是每次向DOM添加图像时调用kepresize。

我不知道kepresize是否是幂等的，但如果是，则可以在添加新元素时在所有IMG元素上调用它。否则，将IMG元素的创建和添加分开并以这种方式调用：

var newImage = $('<img src="pathtofile"/>');
newImage.kepresize({maxWidth: 200,maxHeight: 150});
$('#content').append(newImage);

Answer 3

这种情况会导致您尝试调整DOM中尚未存在的内容！

必须在调整大小函数之前调用append（）！

您的代码必须如下所示：

DEMO： http://jsbin.com/eraqo/2

$(function(){
  // this resize when page load the first time
 $('.thumb').kepresize({maxWidth: 100,maxHeight: 150});  
//this append the image on click event
  $('a#add').click(function () {
  $('#resizer').append('<img class="thumb" src="goodphotography.jpg" />');
//now you can resize the new image
    $('.thumb').kepresize({maxWidth: 100,maxHeight: 150});
  });
  });

Answer 4

使用.load（）事件。
描述：将事件处理程序绑定到“加载”JavaScript事件。

$('img').load(function(){
    $(this).kepresize({maxWidth: 200,maxHeight: 150});
});

附加图像后运行jquery图像缩放器

4 个答案: