¿Cuál es la mejor manera de cargar contenido de carga para los usuarios con JavaScript?

StackOverflow https://stackoverflow.com/questions/4786985

Pregunta

Tengo una página que tiene muchas imágenes y otro código que funcionaría mejor si se carga perezoso.

He estado intentando hacer esto con la etiqueta Noscript, pero me di cuenta de que no funciona correctamente en IE. Funciona en cualquier otro navegador que probé (FF, Opera, Chrome, Safari, etc.), así que estoy un poco frustrado.

Estoy bastante seguro de que en un momento u otro en realidad tuve esto trabajando en IE porque he estado usando la técnica durante un tiempo y pruebo IE con bastante frecuencia ... pero no funciona ahora y todo lo que tengo en Google parece sugerir que nunca funcionó.

Aquí hay un ejemplo simple de copiar y pegar que muestra lo que estaba intentando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

El HTML utilizado para usuarios con JavaScript y sin JavaScript es el mismo. Solo uso jQuery para tabular el contenido para que sea más fácil de ver. Dado que el contenido se paga en JavaScript, necesita una carga perezosa cuando se abre una pestaña para que no lleve años descargar inicialmente cuando la página tiene archivos adjuntos considerables.

¿Cómo puedo lograr esto sin emitir el HTML más de una vez?

¿Fue útil?

Solución

Lo que debe hacer es hacer que todas las imágenes apunten a un Pixel GIF (o PNG). Escriba un script que verifique si un usuario se ha desplazado cerca de una imagen, y luego use JavaScript para intercambiar el píxel con la imagen completa.

En los scripts que he escrito, tendrías una etiqueta de imagen que se parece:

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

Alternativamente, podrías usar un complemento como este. Nota: No he usado este complemento antes, pero parece que es todo lo que necesitas.

Si realmente quisieras obtener hardcore, podrías cargar tu JavaScript usando algo como HEad.js o control.js

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top