rappel jQuery sur la charge d'image (même lorsque l'image est mise en mémoire cache)
https://stackoverflow.com/questions/3877027
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je veux faire:
$("img").bind('load', function() {
// do stuff
});
Mais l'événement de charge ne se déclenche pas lorsque l'image est chargée depuis le cache. Les docs jQuery suggèrent un plugin pour résoudre ce problème, mais il ne fonctionne pas
La solution
Si le src est déjà défini, l'événement est mise à feu dans le cas mises en cache, avant même le gestionnaire d'événements liés. Pour résoudre ce problème, vous pouvez boucle à travers la vérification et le déclenchement de l'événement en fonction de .complete, comme ceci:
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) {
$(this).load(); // For jQuery < 3.0
// $(this).trigger('load'); // For jQuery >= 3.0
}
});
Notez le changement de .bind() .one() de sorte que le gestionnaire d'événements ne fonctionne pas deux fois.
Autres conseils
Puis-je suggérer que vous rajoutez dans un objet d'image non-DOM? Si elle est mise en mémoire cache, cela prendra un rien de temps, et le onload sera toujours le feu. Si elle est mise en mémoire cache pas, il se déclenche onload lorsque l'image est chargée, qui devrait être en même temps que la version DOM de l'image ne sera pas terminé.
Javascript:
$(document).ready(function() {
var tmpImg = new Image() ;
tmpImg.src = $('#img').attr('src') ;
tmpImg.onload = function() {
// Run onload code.
} ;
}) ;
Mise à jour (pour gérer plusieurs images et avec pièce jointe correctement ordonnée onload):
$(document).ready(function() {
var imageLoaded = function() {
// Run onload code.
}
$('#img').each(function() {
var tmpImg = new Image() ;
tmpImg.onload = imageLoaded ;
tmpImg.src = $(this).attr('src') ;
}) ;
}) ;
Ma solution simple, il n'a pas besoin de plug-in externe et pour les cas communs devrait être suffisant:
/**
* Trigger a callback when the selected images are loaded:
* @param {String} selector
* @param {Function} callback
*/
var onImgLoad = function(selector, callback){
$(selector).each(function(){
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
});
};
l'utiliser comme ceci:
onImgLoad('img', function(){
// do stuff
});
par exemple, fondu dans vos images sur la charge que vous pouvez faire:
$('img').hide();
onImgLoad('img', function(){
$(this).fadeIn(700);
});
Ou comme alternative, si vous préférez un plugin comme jquery approche:
/**
* Trigger a callback when 'this' image is loaded:
* @param {Function} callback
*/
(function($){
$.fn.imgLoad = function(callback) {
return this.each(function() {
if (callback) {
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
}
});
};
})(jQuery);
et de l'utiliser de cette manière:
$('img').imgLoad(function(){
// do stuff
});
par exemple:
$('img').hide().imgLoad(function(){
$(this).fadeIn(700);
});
Avez-vous vraiment le faire avec jQuery? Vous pouvez joindre l'événement onload directement à votre image ainsi;
<img src="/path/to/image.jpg" onload="doStuff(this);" />
Il se déclenche chaque fois que l'image est chargée, à partir du cache ou non.
Vous pouvez également utiliser ce code avec le soutien d'erreur de chargement:
$("img").on('load', function() {
// do stuff on success
})
.on('error', function() {
// do stuff on smth wrong (error 404, etc.)
})
.each(function() {
if(this.complete) {
$(this).load();
} else if(this.error) {
$(this).error();
}
});
Je viens d'avoir ce problème moi-même, cherché partout pour trouver une solution qui ne comportait pas de tuer mon cache ou de télécharger un plug-in.
Je ne vois pas ce fil immédiatement si je trouve quelque chose d'autre au lieu qui est une solution intéressante et (je pense) digne d'affichage ici:
$('.image').load(function(){
// stuff
}).attr('src', 'new_src');
En fait, j'ai eu cette idée des commentaires ici: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
Je ne sais pas pourquoi cela fonctionne, mais je l'ai testé sur IE7 et où elle a éclaté avant qu'il fonctionne maintenant.
it helps,
Modifier
La réponse acceptée explique en fait pourquoi:
Si src est déjà défini l'événement est mise à feu dans le cache tubé avant d'obtenir le gestionnaire d'événements liés.
Une solution que je trouve https: //bugs.chromium. org / p / chrome / questions / détail? id = 7731 # c12 (Ce code pris directement du commentaire)
var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;
Une modification à l'exemple de GUS:
$(document).ready(function() {
var tmpImg = new Image() ;
tmpImg.onload = function() {
// Run onload code.
} ;
tmpImg.src = $('#img').attr('src');
})
Définir la source avant et après le onload.
En utilisant jQuery pour générer une nouvelle image avec l'src de l'image, et l'affectation du mode de charge directement à ce que le procédé de charge est appelée avec succès lorsque les finitions jQuery générer la nouvelle image. Cela fonctionne pour moi dans IE 8, 9 et 10
$('<img />', {
"src": $("#img").attr("src")
}).load(function(){
// Do something
});
Il suffit de l'ajouter à nouveau l'argument src sur une ligne distincte après est défini le img ojet. Cela duper IE dans le déclenchement de l'enfant-événement. Il est laid, mais il est la plus simple solution que j'ai trouvé à ce jour.
jQuery('<img/>', {
src: url,
id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE
Je peux vous donner une petite astuce si vous voulez faire comme ceci:
<div style="position:relative;width:100px;height:100px">
<img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
<img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>
Si vous le faites que lorsque les caches du navigateur des images, il est pas un problème toujours img img montré, mais de chargement en image réelle.
J'ai eu ce problème avec IE où le e.target.width serait défini. L'événement de charge serait le feu, mais je ne pouvais pas les dimensions de l'image dans IE (chrome + FF a travaillé).
avère que vous devez chercher e.currentTarget.naturalWidth e.currentTarget.naturalHeight .
Encore une fois, IE fait des choses qu'il voie propre (plus compliqué).
Vous pouvez résoudre votre problème en utilisant PRISON plugin qui vous permet également de charger des images paresseux (amélioration les performances de la page) et le passage du callback comme paramètre
$('img').asynchImageLoader({callback : function(){...}});
Le code HTML devrait ressembler à
<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />
Si vous voulez une solution pure CSS, cette astuce fonctionne très bien - utiliser l'objet de transformation. Cela fonctionne également avec des images quand ils sont mis en mémoire cache ou non:
CSS:
.main_container{
position: relative;
width: 500px;
height: 300px;
background-color: #cccccc;
}
.center_horizontally{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
.center_vertically{
position: absolute;
top: 50%;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
transform: translate(0,-50%);
}
.center{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
transform: translate(-50%,-50%);
}
HTML:
<div class="main_container">
<div class="center_horizontally"></div>
<div class="center_vertically"></div>
<div class="center"></div>
</div>
</div
