0

我在从 div 更改 bg 图像时遇到问题。它可以在 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;
    });

网站：链接

4

2 回答 2

0

优化代码的一件事是通过重用它们来尽量减少 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];
于 2012-06-18T15:21:53.147 回答
0

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

  • 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';
于 2012-06-18T16:21:19.690 回答