Question

这是我的代码

＆＃13;

$('.thumb-container-xs').click(function() {
  ///alert("You have clicked!");
  var img = $(this).find('img');
  var img_src = img.attr('src');
  var img_title = img.attr('title');
  var img_alt = img.attr('alt');

  $("#productImage0").attr({
    src: img_src + '?' + new Date().getTime(), //adding random number at the end of the src not working
    title: img_title,
    alt: img_alt
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 thumb-container clearfix" id="activeProductImgContainer">
  <!--Big Image-->
  <a href="#" class="img-bg" id="activeProductImgBg">
    <img src="http://cdn3.wpbeginner.com/wp-content/uploads/2016/02/stocksnap.jpg" class="thumb-img img-thumbnail thumb-custom" id="productImage0" alt="Mypic" title="My pic">
  </a>
</div>
<div class="clearfix">
  <!---small images-->
  <div class=" col-xs-3 thumb-container-xs">
    <a class="img-bg-xs" id="productImage2" href="#"><img class="thumb-img-xs  img-responsive thumb-custom" src="http://cdn3.wpbeginner.com/wp-content/uploads/2016/02/stocksnap.jpg" title="f" alt="f"></a>
  </div>
  <div class=" col-xs-3 thumb-container-xs">
    <a class="img-bg-xs" id="productImage3" href="#"><img class="thumb-img-xs  img-responsive thumb-custom" src="https://s3.amazonaws.com/media.spl/1353_bof.jpg" title="g" alt="h"></a>
  </div>
  <div class=" col-xs-3 thumb-container-xs">
    <a class="img-bg-xs" id="productImage4" href="#"><img class="thumb-img-xs  img-responsive thumb-custom" src="https://www.bensound.com/bensound-img/betterdays.jpg" title="h" alt="h"></a>
  </div>
  <div class=" col-xs-3 thumb-container-xs">
    <a class="img-bg-xs" id="productImage5" href="#"><img class="thumb-img-xs  img-responsive thumb-custom" src="https://www.bensound.com/bensound-img/littleplanet.jpg" title="i" alt="i"></a>
  </div>

</div>

＆＃13;

代码实际上做的是每当我点击一个小图片缩略图时更新大图像。在Crome和Firefox中一切正常，但在Internet Explorer中无法正常工作。当我点击小图片缩略图时，＆＃39; src＆＃39;图像正在变化，但图像没有更新。我该如何解决这个问题？

Answer 1

我找到了解决方案。我的代码没有问题。由于Internet Explorer不支持object-fit css属性，我必须隐藏<img>标记并为其设置background-image属性父#activeProductImgBg和我所做的只是改变了隐藏在IE中的图像src。但我也必须同时更改它的父级的背景属性。现在它工作正常。<登记/> 这是附加代码

 $("#activeProductImgBg").css('background-image', 'url(' + img_src + ')');

Answer 2

尝试运行此代码而不是您的代码，并查看load（）是否触发。他们声称你修复了URL（最后添加一个种子）它应该有效。我只是没有安装IE11来测试它。

$('.thumb-container-xs').click(function() {
      ///alert("You have clicked!");
      var img = $(this).find('img');
      var img_src = img.attr('src');
      var img_title = img.attr('title');
      var img_alt = img.attr('alt');

      $("#productImage0").attr({
        src: img_src + '?' + new Date().getTime(), //adding random number at the end of the src not working
        title: img_title,
        alt: img_alt
      });
      $("#productImage1").attr({
        src: img_src + '?' + new Date().getTime(), //adding random number at the end of the src not working
        title: img_title,
        alt: img_alt
      });

      $("#productImage0").load(function(){console.log(0)});
      $("#productImage1").load(function(){console.log(1)});

    });

如果没有加载图像，console.logs将不会触发，如果它们这样做则是刷新DOM的问题。

这个技巧让我强迫浏览器重绘元素，你可以快速连续隐藏显示它们的父级。

$('#activeProductImgContainer').hide().show(0);

图像src正在更改，但Internet Explorer 11中的图像未更新

2 个答案: