jQuery实现图片加载完成后改变图片大小的方法

针对“jQuery实现图片加载完成后改变图片大小的方法”的问题，我可以提供以下完整攻略：

1. 使用jQuery的load()方法

如果需要在图片加载完成后触发图片大小的改变事件，可以使用jQuery的load()方法来实现。具体步骤如下：

1.1 在HTML文件中插入图片

在HTML文件中插入需要加载的图片，一般情况下可以使用img标签来引用图片，如下所示：

<img src="example.jpg" alt="图片示例">

1.2 给图片添加class

为了让图片容易被选中和操作，可以给图片添加class，如下所示：

<img class="img-responsive" src="example.jpg" alt="图片示例">

1.3 添加jQuery代码

在jQuery代码部分，首先需要使用选择器选中需要改变大小的图片，然后给它添加图片加载完成事件。

在事件中，可以通过this关键字获取当前图片的尺寸，然后通过jQuery的css()方法改变图片的大小。

全部代码如下：

$(document).ready(function() {
  $('.img-responsive').load(function() {
    var width = this.width;
    var height = this.height;
    $(this).css({
      'width': width/2 + 'px',
      'height': height/2 + 'px'
    });
  });
});

这样，在图片加载完成后，就能动态改变每个图片的大小了。

2. 使用插件

除了使用jQuery的load()方法，还可以使用现有的jQuery插件来实现图片加载完成后改变图片大小的效果。这里介绍两个插件。

2.1 ImagesLoaded

ImagesLoaded是一款非常流行的jQuery插件，可以帮助我们在某个容器中监听所有图片的加载状态。下面是ImagesLoaded的使用方法。

2.1.1 引入ImagesLoaded插件文件

首先，需要在HTML文件中引入ImagesLoaded插件的文件，可以从官网下载或使用CDN引入。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>

2.1.2 给容器添加class

接着，需要为图片容器添加class，以便被ImagesLoaded监听所有图片的加载状态。

<div class="image-container">
  <img src="example1.jpg">
  <img src="example2.jpg">
  <img src="example3.jpg">
</div>

2.1.3 添加jQuery代码

在jQuery中，使用选择器选中需要监听的容器，然后使用ImagesLoaded插件的imagesLoaded()方法来监听所有图片的加载状态。

在回调函数中，可以通过this关键字获取每个图片的尺寸，然后使用jQuery的css()方法改变图片的大小。

全部代码如下：

$(document).ready(function() {
  $('.image-container').imagesLoaded(function() {
    $('.image-container img').each(function() {
      var width = this.width;
      var height = this.height;
      $(this).css({
        'width': width/2 + 'px',
        'height': height/2 + 'px'
      });
    });
  });
});

2.2 Masonry

Masonry是一款非常强大的jQuery插件，可以帮助我们实现网格布局效果。

在使用Masonry时，它会自动为每个item计算位置和大小，因此可以在图片正在加载时使用它来实现自适应图片尺寸。

下面是Masonry的使用方法。

2.2.1 引入Masonry插件文件

首先，需要在HTML文件中引入Masonry插件的文件，可以从官网下载或使用CDN引入。

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

2.2.2 设置网格布局

在HTML文件中，需要使用Masonry的网格布局特性来将图片放在各自的位置上。

<div class="image-container">
  <div class="item">
    <img src="example1.jpg" alt="">
  </div>
  <div class="item">
    <img src="example2.jpg" alt="">
  </div>
  <div class="item">
    <img src="example3.jpg" alt="">
  </div>
</div>

2.2.3 添加jQuery代码

在jQuery中，使用选择器选中需要实现网格布局的容器，然后使用Masonry插件的masonry()方法来初始化。

全部代码如下：

$(document).ready(function() {
  $('.image-container').masonry({
    itemSelector: '.item'
  });
});

这样，每个item就会按照网格布局自动排列，并且在图片加载完成后可以自适应图片尺寸。