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

Question

我从div 更改 bg 图像时遇到问题。它可以完美地在谷歌浏览器和火狐上工作，但在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;
    });

网站：链接

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