在jquery/javascript中，有哪些方法可以加速img交换？

我有一个稍微含糊的问题。我的代码中包含以下内容：

在jsfiddle示例中，它运行平稳。图像交换迅速，没有任何麻烦。但是，当它出现在我的代码库中时，会有一个明确的延迟

我想弄清楚为什么会出现这种滞后。jquery的结构与上面完全相同。例如，在$（document）.ready（…）函数中，我检查用户是否单击了img（基于类名），然后执行与JSFIDLE中相同的代码

---

我绞尽脑汁想知道在这里该做什么。。。很明显，我没有做正确的交换，或者我在做这件事的时候非常严厉。在此之前，我的一位同事使用AJAX进行交换，但这似乎更为繁重（获取另一个图标的完整get请求…。

我修改了您的小提琴：

我优化过的东西：

为

img1

和

img2

创建了一个变量，这样您就不必再导航DOM来引用这两个图像，从而提高了性能

将单击处理程序应用于图像本身，因此不必搜索包装器的子级

基本思想是尽可能减少jquery选择的数量 让我知道这是否有助于加快速度

$(document).ready(function() {
    var img1 = $('#img1');
    var img2 = $('#img2');

    $(".toggle_img").click(function(e) {
        var target = $(e.target);
        if(target.is(img1)){
             img1.hide();
             img2.show();
        }
        else if (target.is(img2)) {
            img2.hide();
            img1.show();
        }
    });
});

---

不可见的图像在显示之前通常不会由浏览器加载。如果出现问题，可以从下载RIOT或pngCrush之类的图像优化程序开始优化图像。 如果只有两个箭头，你应该考虑将它们加入CSS精灵中。 您可以尝试不使用jQuery做所有事情，但它不应该真的有多大区别

可能是这样的，在JS中加载隐藏图像，并在jQuery外部执行一些遍历（但这可能不是问题，尽管对于简单的图像交换来说代码似乎太长了？）

---

​

您可以尝试

$（children[0]）.attr（“src”http://i.imgur.com/c0fuZ.png“”

不需要隐藏和显示，只需更改图像源即可。不确定这是否有帮助，对我来说，这两种方式都很顺利。在JSFIDLE示例代码中，DOM非常小，parent（）.children（）调用开销很小。如果没有看到我认为更复杂的代码，则需要更长的时间。你能基于ID或数据ID而不是父/子ID进行隐藏/显示对吗？我想说这是一个预加载问题，但你已经做到了。您可以使用Firebug或其他开发工具跟踪JavaScript，以查看它在您的环境中实际执行的操作。CSS精灵会减少加载时间吗？我刚在chrome上检查过——只要有img标签就可以确保图像是预加载的。即使显示设置为“无”，图像仍会下载到我的机器上。是的，它会！在一幅图像中同时使用两个箭头将确保它们都已加载，并且仅更改背景位置将比更改图像源或更改元素更快。此外，它只需要向服务器发送一个请求即可下载，而不是两个请求，因此它将在几乎所有方面加快加载速度，这对于sprite来说是一个完美的例子。

$(document).ready(function() {
    var img=new Image();
        img.src='http://i.imgur.com/ZFSRC.png'; //hidden image url

    $(".wrapper").click(function(e) {
        if(e.target.className=='toggle_img') {
           $('.toggle_img').toggle();
           if (e.target.parentNode.childNodes[1].style.display=='none') {
              console.log("hello");
          } else {
              console.log("goodbye");
          } 
        }
    });    
});