javascript - 无法使用 jQuery 更改图像宽度

Question

我有一个页面显示多个图像中的单个图像。我将所有图像存储在 json 对象 (photoarr) 中，因此为了来回导航，我使用此函数:

function setPhoto(index) {
  var photo = photoarr[index];
  $('#photoId').text(photo.id);
  $('#photo').attr({ 'src': photo.url, 'alt': photo.title });
  $('#photoTitle').text(photo.title);
  $('#photoWidth').text(photo.width);
  $('#photoHeight').text(photo.height);
  $('#photoTitle').width($('#photo').width());
}

我的挑战是，当我到达最后一行时尝试设置 #photoTitle 宽度以匹配 #photo 宽度 $('#photo' ).width() 为 0(零)。

就好像我需要“刷新”我所做的 DOM 更改才能真正获得新的图像宽度......

如果以上任何一条有意义，请告诉我该怎么做......

提前致谢

Answer 1

你可以尝试类似的事情

function setPhoto(index) {
  var photo = photoarr[index];

  var img = new Image();
  img.src = photo.url;
  img.onload = function(){

    $('#photoId').text(photo.id);
    $('#photo').attr({ 'src': this.src, 'alt': photo.title });
    $('#photoTitle').text(photo.title);
    $('#photoWidth').text(this.width);
    $('#photoHeight').text(this.height);
    $('#photoTitle').width(this.width);

  }
}