Question

所以我现在有四个li都包含里面的图像，gif也在那里，但有一个＆＃34; display：none;＆＃34;内联他们。当你将鼠标悬停在其上时，他们的图像将与一个相关的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个，所以这个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'))
  });
});

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

换掉背景GIF的背景图像

1 个答案: