¿Cómo no tomar imágenes con url rota?
jQuery.each(jQuery('img'), function(k, o) { imageStack.push(jQuery(o)); });
Solo envíe las imágenes cuyo evento de load
se haya disparado a imageStack
.
Para hacer esto, puede vincular un detector de eventos de load
a cada imagen que empuja la imagen a imageStack
.
const imageStack = [] $('img').on('load', function() { imageStack.push($(this)); }) $(window).on('load', function(){ //wait for every image to load, so imageStack will contain every loaded image console.log(imageStack) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"> <img src="brokenurl">
Alternativamente, puede esperar a que se cargue cada imagen escuchando el evento de load
de la ventana , luego verifique la propiedad naturalWidth
de la imagen:
const imageStack = [] $(window).on('load', function() { $('img').each(function() { if (this.naturalWidth != 0) { imageStack.push($(this)); } }) console.log(imageStack) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"> <img src="brokenurl">