javascript - 将背景图像换成背景 gif

Question

所以我目前有四个 li，它们都包含图像，gif 也在那个 li 中，但有一个“显示:无；”内联他们。当你将鼠标悬停在 li 的上方时，他们的图像将与真实的 gif 交换，如我在此处编写的 jQuery 中所见:

jQuery(".swap").mouseenter(function () {
    var me = jQuery(this);
    me.attr('src', me.attr('src').replace('.jpg', '.gif'));
});
jQuery(".swap").mouseleave(function () {
    var me = jQuery(this);
    me.attr('src', me.attr('src').replace('.gif', '.jpg'));
});

这是我的 html:

<li>
    <img class="swap" src="image-box.jpg" />
    <img class="swap" src="image-box.gif" />
</li>
<li>
    <img class="swap" src="image-box2.jpg" />
    <img class="swap" src="image-box2.gif" />
</li>

但是我注意到，即使在隐藏了元素及其容器之后，这些 gif 当前仍在移动设备上加载到我的网站中。所以我决定在 li 中制作一个 div 的图像背景图像(因为链接需要环绕图像本身)，现在它的布局如下:

<li>
    <a href="#">
       <div class="swap" id="imageOne"></div>
    </a>
</li>
<li>
    <a href="#">
       <div class="swap" id="imageTwo"></div>
    </a>
</li>

我编写的用于将图像换成 gif 的 jQuery 如下:

jQuery("#imageOne").mouseenter(function () {
    jQuery(this).css('background-image','url(image-box.gif)');
    });
jQuery("#ImageOne").mouseleave(function () {
        jQuery(this).css('background-image','url(image-box.jpg)');
    });

jQuery("#imageTwo").mouseenter(function () {
    jQuery(this).css('background-image','url(image-box2.gif)');
    });
jQuery("#ImageTwo").mouseleave(function () {
        jQuery(this).css('background-image','url(image-box2.jpg)');
    });

所以我的问题是如何简化我编写的这个新脚本以使其更简洁。在实际站点上有 4 个 li，所以这个 jQuery 看起来又大又乱。我知道必须有更好的方法来交换它

Answer 1

如果 jpeg 和 gif 文件名之间的唯一区别是文件扩展名(即文件名相同)，您仍然可以重用原始脚本来替换图像的引用:

jQuery(".swap").mouseenter(function () {
    var me = jQuery(this);
    me.css('background-image', me.css('background-image').replace('.jpg', '.gif'));
});
jQuery(".swap").mouseleave(function () {
    var me = jQuery(this);
    me.css('background-image', me.css('background-image').replace('.gif', '.jpg'));
});

HTML:

<li>
    <div class="swap" style="background-image:url('image/image-1.jpg');"></div>
</li>
<li>
    <div class="swap" style="background-image:url('image/image-2.jpg');"></div>
</li>

您可以在文档就绪时准备好您的 gif，这样当您想要进行交换时它们已经在缓存中:

jQuery(document).on('ready', function(){
    jQuery('.swap').each(function(){
    //create hidden image
    var $img = jQuery('<img>').css({
      'visibility':'hidden',
      'position':'absolute',
      'z-index:-1'
    });
    //create trigger once the image is loaded
    $img.on('load', function(){
      jQuery(this).remove();
    });
    //add to DOM
    jQuery('body').append($img);
    //set image source to call server for image
    $img.attr('src', jQuery(this).css('background-image').slice(4, -1).replace('.jpg', '.gif'))
  });
});

我没有对此进行测试，但我假设相同的交换逻辑应该仍然相关。