Question

我有一个模糊的问题。我的代码中包含以下内容：http://jsfiddle.net/PMnmw/2/

在jsfiddle示例中，它运行顺畅。图像交换迅速，没有任何麻烦。当它在我的代码库中时，存在明显的滞后。

我正在试图弄清楚为什么会出现滞后现象。 jquery的结构与上面完全相同。即在$（document）.ready（...）函数中，我检查用户是否点击了img（基于类名），然后执行与jsfiddle中相同的代码。

我正在努力想弄清楚在这里要做什么......显然我没有做正确的交换，或者我在做这件事时非常沉重。在此之前，我的一位同事正在使用AJAX进行交换，但这似乎更加繁重（完全成熟的get请求获取其他图标......）。

Answer 1

我修改了你的小提琴：http://jsfiddle.net/PMnmw/12/

我优化过的事情：

为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();
        }
    });
});

Answer 2

浏览器通常不会显示不可见的图像，然后才能显示它们。如果出现问题，请先下载像RIOT或pngCrush这样的图像优化器来优化图像。如果它只有两个箭头，你应该考虑将它们加入一个CSS精灵。

你可以尝试不用jQuery做任何事情，但它不应该真的有那么大的差别。

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

$(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");
          } 
        }
    });    
});

FIDDLE

有什么方法可以加快jquery / javascript中的图像交换速度？

2 个答案: