Si j'ai une étiquette IMG comme et je l'ai définie via à nouveau à la même valeur, est-ce que cela sera là un non-op, ou les navigateurs refaire inutilement l'image? (Je suis principalement intéressé par le comportement de IE6-8, FF3.x, Safari 4-5 et Chrome.) Je dois modifier de nombreuses (des centaines de) images à la fois et comparer manuellement la L'attribut SRC pourrait être un peu superflucide - comme je suppose que le navigateur le fait déjà cela pour moi?
3 Réponses :
Lorsque vous modifiez une bande d'éléments à la fois, vous bloquez habituellement le fil d'interface utilisateur de toute façon, alors un seul redessinement après que le JavaScript se passe, ce qui signifie que le redessinement de l'image n'est vraiment pas un facteur.
Je ne doubleerais rien vérifier ici, laissez le navigateur s'en occuper, les nouveaux sont suffisamment intelligents pour le faire de manière efficace (et cela n'a jamais vraiment été essentiel de toute façon).
Le boîtier que vous verrez ici est de nouvelles images chargées et réactivant la page en charge, c'est ce qui est coûteux ici, les images existantes sont très mineures par rapport à ce coût.
@Marcel - Nope ... "DP" aurait dû être "chargée", pas vraiment sûr de savoir comment j'ai faurété celui-là ... Merci pour la prise!
Ne présumez pas que le navigateur le fera pour vous. Je travaille sur un projet d'échelle similaire nécessitant des centaines d'images (chargement dynamique), avec la vitesse de la priorité absolue.
Caching La propriété 'SRC' de chaque élément est fortement recommandée. Il est [modifier] La majorité de la lente dans l'interface était due à toutes mes boucles et processus. Une fois ceux qui ont été optimisés, l'interface utilisateur était très snappée, même lorsqu'elle est chargée de manière continue des centaines d'images.
SRC sur la même valeur peut provoquer des événements de refusion ou de peinture . / p>
clonenode et remplacode pour un échange très rapide et efficace.
Pour être plus précis: il est coûteux d'accéder à des centaines d'éléments DOM en JavaScript, c'est toujours le gouffret de nombreux programmes.
@IM: Merci, très intéressant! J'ai pensé à la mise en cache de la propriété SRC (ou dans mon cas: utiliser un entier pour se souvenir de l'état) - je préférerais l'éviter (c'est une complexité supplémentaire), mais s'il est vrai que le réglage de la SRC à une valeur inchangée peut provoquer Un refoule , alors je vais certainement le faire. Êtes-vous sûr du reflet?
@chris_l - Cela ne peut plus causer de refusion à la normale, pas si vous le faites dans un lot ... comme je le mentionne dans l'autre réponse, vous enfermez le fil de l'interface utilisateur jusqu'à ce que le script soit fait quand même. Seul un reflow avec les images que vous avez dans le cache se produira ... Les autres qui se chargeront toujours de la chargement provoqueront également un refus s'ils n'ont pas de dimensions, ce n'est pas grand chose que vous pouvez faire à ce sujet que les autres que les dimensions.
@Nick: J'utilise déjà des dimensions. Étant donné que les images sont dans différents éléments (DIV), je m'inquiète, qu'ils peuvent causer des refus séparations au sein de chaque div (?) Je ne sais pas beaucoup sur les stratégies de refusion du navigateur, c'est donc une hypothèse.
@chris_l - S'ils ont des dimensions, ils ne causeront pas de refusion ... Un refus se produit car il rend sans savoir que les dimensions, alors l'image charge la page redimensionne pour l'accueillir (car elle connaît désormais les dimensions) ... si Il a les dimensions dès le début, il n'y a pas de refusion nécessaire.
Je suis à peu près sûr que cela peut déclencher de refusion, mais comme Nick dit, cela pourrait avoir une importance capable. Mais comme Marcel et moi (indirectement dans la modification) ont dit, refus n'est pas la seule chose que vous devez vous inquiéter.
@Tim: très bon point à nouveau - je n'ai pas pensé au positionnement absolu. Mes images sont déjà positionnées absolument dans leur div. Donc, tout ce qui reste est un redessinement simple. Cela augmenterait un peu la boîte redessinée de la fenêtre, mais je pense que ce coût sera inférieur au coût de la définition de l'attribut DOM. Vos réponses (et Nicks et Marcel's) m'ont beaucoup aidé. Maintenant, tout ce que je dois faire est d'évaluer le coût entre le maintien d'une variable d'état et la définition d'un attribut DOM. Je vais comprendre ça. Merci!
Je recommande d'utiliser la technique CSS Sprite. Plus d'infos à: http://www.alistapart.com/articles/
Vous pouvez utiliser une image contenant toutes les icônes. Puis au lieu de changer l'attribut SRC, vous mettez à jour la propriété de fond.
@ZAFER: Merci pour la suggestion. J'ai bien peur que je ne puisse pas utiliser cela, car les images de fond ne sont pas à l'échelle lorsque l'utilisateur est un redimensionnement de texte (les images doivent toujours avoir exactement une hauteur de 1em). Les images de fond ne peuvent en aucun cas être à l'échelle (avec CSS 2.1).
@chris - pas vrai, du moins pas dans Firefox 3.6.8; Les images arrow sur cette page sont des images de fond et elles font échelle lors du zoom avant et arrière.
@Marcel: une page zoomère zoomère tout bien sûr. Mais vérifiez l'option "Vue -> ZOOM -> ZOOM Texte uniquement". Certains utilisateurs ont vérifié cette option (et pour certains navigateurs, c'est la valeur par défaut.)
@chris - Dans ce cas, des images normales (comme les gravatars) ne sont pas aussi zoomées.
@Marcel: Vous pouvez les mettre à l'échelle, si vous spécifiez la taille de l'EM.
@chris: Si l'événement Zoom peut être détecté, vous pouvez modifier l'image d'arrière-plan en conséquence. Il existe un moyen de détecter l'événement: Stackoverflow .Com / Questions / 995914 / ... Donc, pour différents niveaux de zoom, il peut y avoir des images de fond différentes. Mais cette fois, vous devez recalculer et appliquer de nouvelles valeurs BG-X et Y pour couvrir les éléments.
Quelle est la taille des images (en termes de taille de téléchargement)? À quelle fréquence changez-vous la propriété SRC?
@Tim: Les images sont petites en taille de téléchargement (elles ne sont que des icônes de statut) - mais il n'y aura généralement pas de téléchargement, car ils sont surtout déjà mis en cache. Les images seront échangées dans un lot, lorsque l'utilisateur effectue une certaine action - la mise à jour devrait alors être aussi rapide que possible.