Question

我在修改div中的bg图像时出现问题。它适用于谷歌Chrome和Firefox完美无瑕，但在IE上它有点挂起。它在IE上相当慢，有时甚至可以正确加载图像。我的jquery代码是：

$("a.preview").click(function(e){
    var carregar = new Image();
    $(carregar).attr('src','imagens/logos/' +  this.id +'.jpg');
    var img = "imagens/logos/" +  this.id +".jpg"; // recebe src da imagem de acordo com a ID
    var alvo = this.id; // salva ID do disparador
    var logo = document.createElement('img'); // cria objeto imagem
    var $logoCarregado = $(logo); // recebe o objeto imagem criado
    $logoCarregado.attr('src', 'imagens/logos/'+ alvo +'_logo.png'); //define atributo src da imagem criada

    $(".box").fadeOut("fast");
    $(".box").hide();
    $(".overlay").hide("fast");
    $(".logo").hide("fast");
    $(".logo").empty();

    $(".loader").show("fast"); // mostra carregamento
    $(carregar).load( function() { // carrega o conteudo
       $(".loader").hide("fast"); // esconde imagem de carregamento
       $(".logo").empty(); // apaga conteúdo da ID logo
       $("#menu").fadeOut("fast"); //fadeOut menu   
       $(".overlay").show("fast"); // mostra barra do conteúdo da página do cliente     
       $(".logo").show("fast"); // mostra logo do cliente
       $logoCarregado.appendTo('.logo'); // atribue a logo do cliente á div logo
       $("#fundo").empty();
      $("#fundo").append("<img src='"+ img +"' class='bg' />"); // troca o fundo
       var logoHeight = $logoCarregado.height() + 100; // seta o tamanho da logo + 80 como altura

      if (logoHeight <= 120){ //verifica posição do logo do cliente

       $(".box" + "#"+alvo) // seleciona o box de texto de acordo com a ID do disparador
            .css("display", + "block") // mostra o box
            .css("left","0%") // define distância da margem esquerda do box
            .fadeIn("fast") // fadeIn texto
            .css("top",+ logoHeight+100 + 'px'); // define altura do box
        $(".box" + "#"+alvo).animate({ 
            left: '8%'}, 300 ); // anima entrada do texto
      }
      else{

           $(".box" + "#"+alvo) // seleciona o box de texto de acordo com a ID do disparador
            .css("display", + "block") // mostra o box
            .css("left","0%") // define distância da margem esquerda do box
            .fadeIn("fast") // fadeIn texto
            .css("top",+ logoHeight + 'px'); // define altura do box
        $(".box" + "#"+alvo).animate({ 
            left: '8%'}, 300 ); // anima entrada do texto
      }

      });
return false;
    });

网站：link

Answer 1

优化代码的一件事是尝试通过重用它们来最小化JQuery选择器的使用。

所以，而不是使用它：

$(".box").fadeOut("fast");
$(".box").hide();
$(".overlay").hide("fast");
$(".logo").hide("fast");
$(".logo").empty();

试试这个......

var $boxElem = $('.box');
var $logoElem = $('.logo');

$boxElem.fadeOut("fast").hide();
$(".overlay").hide("fast");
$logoElem.hide("fast").empty();

甚至更好......

var boxElem = document.getElementsByClassName('box')[0];

Answer 2

这取决于究竟什么是慢的。它可能由以下原因引起：

DOM更改
背景图片下载

jQuery在设计上减慢了浏览器的速度。要实现真正快速的页面，请不要使用jQuery。

值得预加载图片：

var imageObj = new Image();
imageObj.src = 'image.png';

然后你可以切换CSS类：

.mode1 {
    background-image: url(default.png);
}

.mode2 {
    background-image: url(image.png);
}

通过ECMAscript：

document.getElementById('logo').className = 'mode2';

在IE上通过Jquery更改bg Image非常慢

2 个答案: