jquery image modal第一次没有加载图像

Question

我的页面（使用 wordpress 构建）使用一些 jquery 在单击图像时显示模式。模式包含被点击的图像，我使用下面的 jquery 来做到这一点。

问题是页面加载时，第一次点击图片显示模态，但是模态图片的src并没有更新为点击图片的url。

jquery 好像没有运行。一旦模式关闭并单击新图像，它就会起作用。

页面确实有延迟加载，但图片在图片标签中显示“已加载”

有什么想法吗？

页面链接：https://www.musiciansforscreen.com/musicians/flavio/

.prof-image 是用户点击的图像 .lightbox-image 是modal中的图片

jQuery('.prof-image').click( function() {
  
  var image = jQuery(this).attr('src');
  
  jQuery('.lightbox-image').attr('src', image );
  
});

Answer 1

好的，我实际上通过更新代码来更改“data-lazy-src”以及“src”属性来解决这个问题。 “data-lazy-src”属性提示了占位符图像，因此改变了问题。

Answer 2

您的代码确实第一次不运行然后它第二次运行因为模态是关于“显示”而不是“显示”然而 .. 这就是为什么“.lightbox-image”不会用于设置您的图像的原因，因为它尚未在 dom 中加载（在第一步中）。 在这种情况下，您必须使用 modal" 的“显示事件”，然后将代码放入 insde 。 看看这个modal events

这是我的代码解决方案：

var lastImgSrc = null;
/** change #myModal to your modal id **/
jQuery('#myModal').on('shown.bs.modal', function (e) {
        // if the modal is fully loaded and the lastImgSrc is not null, set the src url with the wanted value.
    if(lastImgSrc){
        jQuery('.lightbox-image').attr('src', lastImgSrc ); 
    }
});

jQuery('.prof-image').click( function(e) {
  e.preventDefault();
  lastImgSrc = jQuery(this).attr('src');
  jQuery('#myModal').modal('show'); // show modal manually
});

jQuery('#myModal').on('hidden.bs.modal', function (e) {
  lastImgSrc = null; // if modal closed then reset the variable;
})