0

背景画像を 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;
    });

ウェブサイト:リンク

4

2 に答える 2

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 に答える
0

コードを最適化するための 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];
于 2012-06-18T15:21:53.147 に答える