tengo este codigo
$(document).on('readystatechange', function (){ debugger; if (document.readyState === 'complete') { $('img').each(function() { console.log('image printed=" +this); } }) })Funciona correctamente cuando accedo a mi página localhost por primera vez, pero si vuelvo a cargar la misma página (es decir, intento acceder a la misma página nuevamente), document.readyState cambia casi en 1 segundo de interactivo a completo (aunque las imágenes no estén cargadas). ).
No puedo entender el problema, ¿es por el caché? En caso afirmativo, ¿cómo puedo asegurarme de que mi código anterior se ejecute solo después de que se hayan cargado todas las imágenes (ya sea que provengan del caché del navegador o del backend)?
La etiqueta de la imagen es así: /abc.jpg" width="45" height="45">
Si está buscando que la lógica se ejecute después de que el trabajo de pintura haya terminado, es decir, la carga de sus imágenes, entonces está buscando el método window.onload en lugar del método document.ready .
¿Porqué es eso? Hay una diferencia significativa entre los dos. El método document.ready se ejecuta tan pronto como los nodos DOM están disponibles , a diferencia de una presentación gráfica real que se representa al usuario. El método window.onload espera a que se complete el trabajo de pintura del navegador, lo que significa que todas las presentaciones gráficas están disponibles para el usuario.
Verá este efecto en forma de alertas en mi ejemplo a continuación. Incluso puse primero el método window.onload para que pueda ver que no se debe al orden en que se declaran.
window.onload = function() { alert('I fire after images have loaded'); } $(document).ready(function() { alert('I fire before images are loaded'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTUEVhwrT-kM5ogBqKM" /> <img src="https://i.picsum.photos/id/430/200/200.jpg?hmac=RbYQ27bVLRKt5ScfTYiQ_ePoVdo70X4eWg2KPc6JF0I" /> <img src="https://i.picsum.photos/id/998/200/200.jpg?hmac=Vc80YaPx9n6ZScRmWn3BK9EpGBVjYYCDlXpsZfYCOPw" /> <img src="https://i.picsum.photos/id/432/200/200.jpg?hmac=b4-kxXh_oTpvCBH9hueJurvHDdhy0eYNNba-mO9Q8bU" />