Javascript 将背景图像替换为背景GIF

所以我现在有四个li，它们都包含图像和GIF，但它们有一个“display:none；”内联。当你将鼠标悬停在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>

---

所以我的问题是如何简化我写的这个新脚本，使它更简洁。在实际的站点上有4个li，所以这个jQuery看起来很大而且非常混乱。我知道一定有更好的方法来替换它

如果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:

您可以在“文档准备就绪”上为GIF设置初始值，以便在您要进行交换时，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'))
  });
});

jQuery（document）.on（'ready'，function（）{
jQuery（'.swap'）。每个（函数（）{
//创建隐藏图像
var$img=jQuery（'
我没有对此进行测试，但我假设相同的交换逻辑仍然相关。
html必须如何设置？gif是否仍需要加载到页面上的某个位置？可以内联定义.jpg（假设它们是由脚本生成的）为了减少在样式表中为每个实例定义特定样式规则的维护开销，您还可以使用一个快速javascript，将每个动画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'));
});

<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>

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'))
  });
});