JS：悬停的图像加载不流畅答案

【问题标题】：JS: Hovered images don't load smoothlyJS：悬停的图像加载不流畅
【发布时间】：2017-12-25 19:41:12
【问题描述】：

我正在使用 JS 更改悬停时的图片...但是悬停的图片加载不顺畅。任何帮助表示赞赏。

    <script type="text/javascript">
      $( document ).ready(function() {
          $('.img-grey').on({
            mouseenter: function (e) {
              var greysrc = $(this).attr('src');
              var colorsrc = greysrc.replace("1.jpg", "2.jpg")
              $(this).attr('src', colorsrc);
            },
            mouseleave: function (e) {
              var colorsrc = $(this).attr('src');
              var greysrc = colorsrc.replace("2.jpg", "1.jpg")
              $(this).attr('src', greysrc);
            }
          })
      });
    </script>

【问题讨论】：

尝试寻找如何在 JavaScript 中预加载图像。

标签： javascript image hover load

【解决方案1】：

或者，这个任务可以用 css 来解决。检查css属性选择器https://www.w3schools.com/css/css_attribute_selectors.asp

您只需要创建下一个 html 结构：

<div class="container">
    <img src="1path-to-1.jpg" />
    <img src="1path-to-2.jpg" />
</div>
<div class="container">
    <img src="2path-to-1.jpg" />
    <img src="2path-to-2.jpg" />
</div>

见附件sn-p

.container [src$="2.jpg"] {
 display: none;
}

.container:hover [src$="1.jpg"] {
 display: none;
}

.container:hover [src$="2.jpg"] {
 display: inline;
}

.container {
 float: left;
}

<div class="container">
  <img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&1.jpg" />
  <img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>

<div class="container">
  <img src="https://www.gravatar.com/avatar/b8367b2f25ceee4d54595495b4e51312?s=128&d=identicon&r=PG&f=1&1.jpg" />
  <img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>

<div class="container">
  <img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&1.jpg" />
  <img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>

【讨论】：

谢谢，但我有很多图片......很难在css中单独完成......所以我制作了允许我通过更改最后一个数字来在图片之间切换的js 2 比 1 .. 我希望图片 2 和 1 一起加载，所以当它在线时，移动鼠标时不需要时间加载..
这也可以用css解决，见更新答案
再次感谢您，但我不知道如何将它用于一张以上的图片，您能否提供示例.. 请
谢谢 .. 这是一个很好的方法 .. 但我会在我的代码中进行很多更改
未解决 .. 当我使用它时，图片会偏离它们的位置

【解决方案2】：

如果您想预加载您的图像，您应该将它们放入 DOM 或添加为背景属性。这是您的代码的修改版本，它在现有的旁边添加了隐藏的 <img /> 元素。我还没有运行它，但它应该可以工作

$( document ).ready(function() {
    $('.img-grey').map(function () {
      var temp = document.createElement('img');
      temp.src = this.src.replace("1.jpg", "2.jpg");
      temp.style.display = 'none';
      $(this).parent().append(temp);
      return this;
    }).on({
      mouseenter: function (e) {
        var greysrc = $(this).attr('src');
        var colorsrc = greysrc.replace("1.jpg", "2.jpg")
        $(this).attr('src', colorsrc);
      },
      mouseleave: function (e) {
        var colorsrc = $(this).attr('src');
        var greysrc = colorsrc.replace("2.jpg", "1.jpg")
        $(this).attr('src', greysrc);
      }
    })
});

【讨论】：