galerie jQuery self-made simples scintille parfois

Question

EDIT:

j'ai changé le code un peu. D'abord j'ai fait une MasterPage secondaire qui contient le modèle pour la page de vue. Je puis ajouté un peu de script ASP pour avoir la première image présente:

<img src="<%= string.Format("/Content/Images/Products/{0}1.jpg\"", 
        ViewData["CurrentPage"]) %>" alt="" class="imgborder" /> 

J'ai aussi ajouté un script « préchargement » J'ai trouvé (pas sûr si cela fonctionne, ou si je suis la mise en œuvre correctement):

(function ($) { 
    var cache = []; 
    $.preLoadImages = function() { 
     var args_len = arguments.length; 
     for (var i = args_len; i--;) { 
      var cacheImage = document.createElement('img'); 
      cacheImage.src = arguments[i]; 
      cache.push(cacheImage); 
     } 
    } 
})(jQuery) 

Et puis au pied de page:

$(document).ready(function() { 
     var cPage = '<%= ViewData["CurrentPage"] %>'; 
     var temp = ""; 
     for (var i = 1; i <= 6; i++) { 
      temp += "\"/Content/Images/Products/" + cPage + i + ".jpg\""; 
      if (i < 6) temp += ", "; 
     } 
     jQuery.preLoadImages(temp); 
}); 

de plus, j'ai modifié le script de swap pour modifier une balise d'image plutôt que de générer avec jQuery:

function swapImage(val) { 
    $("#CenterImage > img").fadeOut("fast", function() { 
     var cPage = '<%= ViewData["CurrentPage"] %>'; 
     var temp = "/Content/Images/Products/" + cPage + val + ".jpg"; 
     $(this).attr("src", temp); 
     $(this).load(function() { 
      $(this).fadeIn("slow"); 
     }); 
    }); 
} 

Cela semble avoir résolu le problème 99% du temps. De temps à autre, peut-être deux des images prendront plus de temps que les autres à échanger. D'autres suggestions?

Merci!

---

Bonjour SO:

J'ai fait une simple galerie pour mon site Web ASP.NET MVC avec jQuery. J'ai une grande photo centrale et 6 petites vignettes. Voici le code pour le réglage du div centre de la charge:

$(document).ready(function() { 
    var cPage = '<%= ViewData["CurrentPage"] %>'; 
    var temp = "<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />"; 
    $("#CenterImage > p").html(temp); 
}); 

Très simplement obtient le produit de la ViewState et utilise ensuite que pour déterminer l'ensemble de l'image.

Voici le code pour le swapping:

function swapImage(id) { 
    $("#CenterImage > p").fadeOut("fast", function() { 
     var cPage = '<%= ViewData["CurrentPage"] %>'; 
     var temp = "<img src=\"/Content/Images/Products/" + cPage + id + ".jpg\" alt=\"\" class=\"imgborder\" />"; 
     $("#CenterImage > p").html(temp); 
     $("#CenterImage > p").fadeIn("slow"); 
    }); 
} 

La partie bizarre est parfois charge les images en toute transparence et d'autres fois il disparaît normalement, « fige » up, puis disparaît en super rapide.

Des idées/suggestions pour résoudre ce problème?

Answer 1

La solution est de disparaître après les charges d'image comme ceci:

$("#CenterImage > p").load(function() { $(this).fadeIn("slow"); }); 

Answer 2

Vous insérez une nouvelle image dans le DOM, qui peut être ou non mis en cache. Il est préférable de créer l'élément avant l'insertion, de lier un écouteur de chargement, puis de l'ajouter et de l'afficher après avoir vérifié que l'image est chargée.

var $temp = $("<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />"); 

$temp.hide().bind('load', function() { 
    $("#CenterImage > p").empty().append($temp); 
    $temp.show(); 
}