Pour empêcher qu'un grand scintillement d'image sur src changement

J'ai un problème avec l'image de scintillement avec de grandes images.
Dans mon body j'ai 5 images:

<img id="img1" src="img1.png" width="250">
<img id="img2" src="img2.png" width="250">
<img id="img3" src="img3.png" width="250">
<img id="img4" src="img4.png" width="250">
<img id="img5" src="img5.png" width="250">

et celui que je suis en tirant l'une d'elles avec jQuery UI, tous sont en train de changer leur src et sur dragend ainsi:

function dragStart() {
        $('#img2').attr('src','newimg2.png');
        $('#img3').attr('src','newimg3.png');
        $('#img4').attr('src','newimg4.png');
        $('#img5').attr('src','newimg5.png'); }

donc bien, donc bon. Mais j'ai besoin d'utiliser des images de grande taille (2000 x 2000px), car toutes les images sont cliquables et puis ils vont animer à la taille de la fenêtre d'affichage qu'ils ne sont pas de pixelisation.

$this.animate(
                { width: 1800, top: -650, left: -250 }, 

                {
                    duration: 4000,
                    easing: 'easeOutElastic'
                })

Je pense à cause de la taille de chaque image, ils sont de scintillement. Quelqu'un d'entre vous a une idée de comment l'empêcher de scintillement sur les images, si tous les src changer en même temps ?

Merci pour votre effort

  • précharger les images, de sorte que le navigateur n'a pas besoin de les télécharger à ce point. Il y a beaucoup d'image existante de la précharge des tutoriels
  • vous avez besoin pour précharger les images de sorte qu'ils sont d'abord mises en cache et puis ils ne clignote pas lorsque vous modifiez la src
  • mais on pense que je n'ai pas vraiment obtenir de l'est, il est toujours vacillante si j'ai déjà glissé entre eux. ne marche pas que cela signifie qu'ils sont tous chargés? c'est parce que je ne pense pas que de préchargement plus!
  • Il n'est, dans ce cas, vous pouvez en voir le résultat dans le navigateur de lissage de l'rétréci version du graphique. Quel genre de scintillement est-il? l'image en train de disparaître et de réapparaître? il se pixélisé et puis ne pas pixélisé?
  • sa peu caché, et apparaît alors le nouveau!
  • Qui sonne toujours comme un préchargement problème, mais il peut également être juste prendre un moment pour récupérer à partir de la cache comme il est si grand.

InformationsquelleAutor supersize | 2013-05-24
  1. 4

    Le problème que vous décrivez ne ressemble pas à un pré-chargement de problème pour moi.

    Pour le préchargement qui allait se passer, lorsque vous chargez une AUTRE image à partir du serveur une fois que vous commencez à déplacer. Mais comme j'ai lu votre Question que vous vous déplacez les DOM-objet contenant votre image dans SRC autour.

    C'est probablement un problème de Navigateur, car il a pour redimensionner vos images vers le bas à partir de 2k x 2k de disons 100 x 100. Qui est un peu cher interpolation des trucs à faire là.
    Si votre principal problème pourrait être, comme vous l'avez dit, la taille de l'image.

    Même préchargement ne serait pas de l'utiliser, parce que vous avez les mêmes questions alors.

    À mes yeux, vous devriez avoir deux versions de votre image: Un petit (la taille que vous souhaitez faire glisser autour) et le plus gros, celui que vous souhaitez afficher.
    Le grand peut être chargé automatiquement en arrière-plan ou sur demande, lorsqu'un utilisateur clique sur une image.
    Dans le web, il est assez fréquent, pour montrer l'échelle de la petite image à la taille de l'écran avec des animations fluides et de commencer à la précontrainte à l'arrière-plan et lorsque la précharge fini, remplacer l'image plein écran pour supprimer les pixels de l'effet.

    J'espère que je me suis fait clair.

    • grâce à vous, que devrait-être le problème, car toutes les images ont été déjà chargé et sa encore vacillante! très bonne et bien pensée de vous! merci 🙂
    InformationsquelleAutor EGOrecords
  2. 4

    Vous pouvez utiliser une fonction comme ceci pour précharger vos images:

     function imagesPreload(){
     var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg");
     for (var i=0; i<imgArray.length; i++) {
         (new Image()).src = imgArray[i];
     }
 }
    • Est-il en utilisant le Fichier API?
    • une question, je ne pourrais pas tout simplement précharger les images en créant des divs avec affichage aucun dans le corps avec les images que je veux?
    InformationsquelleAutor Robin Leboeuf
  3. 4

    La clé de ce que vous essayez de faire est appelée préchargement. Toutefois, vous aurez besoin de réfléchir sur la façon dont vous voulez le faire.

    Préchargement implique le chargement de l'image dans une img balise hors de l'écran, mais encore dans les DOM. Cela met en cache les images sur place, ce qui signifie que la prochaine fois que vous essayez d'utiliser la même source, il va se tirer de cache au lieu d'interroger le serveur pour l'image (et, donc, l'effet de flicker).

    Le préchargement d'une image est une simple question:

    (new Image()).src="mysource.png";

    Ce que vous voulez de décider, c'est quand vous souhaitez charger les images. SI vous chargez tous d'abord, vous aurez potentiellement utiliser beaucoup de bande passante. Si vous les charger sur clic, vous obtiendrez de mise en mémoire tampon.

    Vous pouvez vérifier si une image est chargée à l'aide de la onload événement présent sur les balises img et emballé dans jQuery, si nécessaire, comme suit:

    var i = new Image();
i.onload = function() {
  console.log("Loaded");
}
i.src = "mysource.png";

    Crédits à Robin Leboeuf pour la concision de l'Image() du formulaire.

    • vous n'avez pas à l'ajouter à la dom btw.
    • Merci, je ne savais pas cela! Supposé que vous avez eu à forcer le navigateur à rendre l'image en ajoutant les DOM à la force d'une charge.
    • Omg.. -99999 à gauche? Qui n'a pas de sens. Vous aussi vous pouvez simplement utiliser <div style="display: none;"><img src="" /></div>...
    • Changé. Heureux maintenant?
    • RobinLevoeuf la réponse est tout ce qui est nécessaire pour le chargement, (newImage()).src = thesrc
    • changé et ajouté un peu de la charge peu.
    • Lier l'événement load avant de définir la src, sinon vous ne serez pas attraper la charge de l'événement dans IE parce qu'il déclenche trop vite sur les images mises en cache.
    • merci pour vos réponses. les images sont encore vacillante, et je pense que l'coché la réponse ci-dessus est le problème!

    InformationsquelleAutor Sébastien Renauld
  4. 0

    Voir les commentaires. Vous devez vous assurer que les images sont chargées avant vous les montrer. Cela s'appelle la pré-charge et peut par exemple être réalisé en ayant des images cachées (n'utilisant pas display:none mais en les plaçant hors de l'écran) qui ont la SRC que vous voulez.

    Edit: voir plus élaborée réponse par @Sebástien !

    InformationsquelleAutor Willem Mulder