petite question que j'espère que quelqu'un peut répondre.
Je crée cette extension chromée personnelle pour m'aider à tester la manipulation de contenu sur divers sites. Sur l'un de ces sites, je remplace simplement un Lorsque vous naviguez sur la page, vous pouvez toujours voir l'image d'origine pour une fraction de seconde avant de les échanger.
Y a-t-il un moyen d'arrêter la page de chargement jusqu'à ce que le swap de l'image se termine?
avec une image différente et enveloppant que jQuery
remplawith () fonction dans $ (document). prêt () fonction.
4 Réponses :
non. Toute tentative de faire cela entraînera la page de la page qui n'était pas «prête» qui vous donnera une atteinte à un état où vous pouvez échanger l'image.
Juste une idée - je ne sais pas si cela fonctionnera, mais si vous êtes désespéré, cela vaut la peine d'essayer.
mettre dans un $ ('img'). Live ("surcharger ', fonction () {...}) où vous remplacez l'image src avec une URL qui pointe vers une image vierge, ou rien du tout. Cela devrait être suffisamment rapide pour arrêter l'image de l'affichage, puis lorsque document.Ready appelle, vous pouvez remplacer les images en question.
Il reste encore une chance que l'image soit chargée d'abord, selon laquelle JQuery et le reste de son JavaScript sont chargés.
Eh bien oui, évidemment le code JavaScript pour cela devra être chargé d'abord pour aider - si cela n'est pas possible, il n'y a pas beaucoup d'espoir.
Comme il s'agit d'une extension chromée, je ne suis pas sûr de pouvoir contrôler directement où le script est chargé.
@Chaz: Malgré tout, avec cette méthode, ce serait fait au plus tôt possible, étant donné vos contraintes - ce qui pourrait être légèrement plus tôt que $ (document) .Ready.
Vraisemblablement, l'élément code> est unique identifiable de manière unique (telle que c'est
src code> attribut ou un ID code>). Si tel est le cas, ajoutez rapidement une feuille de style lorsque le document est créé, cette feuille de style doit cibler l'élément code> et le masquer à partir du site. Ensuite, pendant votre
.Ready () code> gestionnaire, désactivez / retirez la feuille de style. var ss = document.createElement("style");
ss.textContent = "img[src='/path/to/img.png'] { visibility: hidden; }";
document.documentElement.childNodes[0].appendChild(ss);
$(document).ready(function () {
ss.parentNode.removeChild(ss);
// swap image here
});
Le chrome ne vient pas avec une option de stylesheet pour les scripts de contenu?
Cela pourrait être difficile à gérer car une fois l'événement de la page terminé, vous devez attendre que l'image soit chargée complètement et que vous ne pouvez pas éviter cela. Mais vous pouvez utiliser quelque chose comme ceci:
Vous pouvez définir une source de chargement d'image avant que l'image finale soit chargée avec succès
J'espère que cela aide, $ ('Imagecontrol'). Charge (fonction () {
// faire quelque chose lorsque l'image est chargée complètement
})
.Error (fonction () {
// poignée si l'image n'est pas chargée
})
.Attr ('src', «source d'image»);
Cordialement
C'est une excellente question, mais malheureusement sans accès natif à la construction DOM (html ou stylesheet), vous devrez attendre la construction d'éléments avant de pouvoir le manipuler.
Utilisation de
.Live () ou.Delegate () peut exécuter comme des éléments deviennent disponibles avant l'état prête du document, mais ce n'est probablement pas. Tout dépend de la façon dont / quand / à quels navigateurs exécutent pendant le rendu.