Изменение изображения bg через JQuery очень медленно на IE

Question

У меня проблема с изменением bg-изображения из div. Он работает на Google 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
• Backgroud образ загрузки

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