{"id":924,"date":"2015-08-15T10:10:39","date_gmt":"2015-08-15T16:10:39","guid":{"rendered":"https:\/\/psoluciones.net\/?p=924"},"modified":"2015-08-15T10:16:00","modified_gmt":"2015-08-15T16:16:00","slug":"lazy-load-retrasar-carga-de-imagenes","status":"publish","type":"post","link":"https:\/\/emanuelpaxtian.com\/blog\/lazy-load-retrasar-carga-de-imagenes\/","title":{"rendered":"Lazy Load: Retrasar carga de im\u00e1genes"},"content":{"rendered":"<p><strong>Lazy Load <\/strong>es un interesante plugin para jQuery que permite postergar la carga de im\u00e1genes en p\u00e1ginas web largas. Las im\u00e1genes que est\u00e1n fuera de la zona visible no ser\u00e1n cargadas hasta que el usuario haga scroll y desplace la p\u00e1gina sobre estas im\u00e1genes.<\/p>\n<h2>Como utilizar Lazy Load<\/h2>\n<p>Para hacer uso de esta librer\u00eda es necesario incluir el el header de nuestro HTML <strong>jQuery<\/strong> y <strong>jquery.lazyload.js<\/strong> el cual lo puedes descargar desde el web oficial Lazy Load Plugin for jQuery.<br \/>\n<script src=\"jquery.js\" type=\"text\/javascript\"><\/script><script src=\"jquery.lazyload.js\" type=\"text\/javascript\"><\/script><br \/>\nEl siguiente paso es inicializar el llamado a Lazy Load, esto lo hacemos llamando ala funci\u00f3n lazyload a todas las im\u00e1genes de nuestro html.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$(function() {\r\n    $(&quot;img&quot;).lazyload();\r\n});\r\n<\/pre>\n<p>Eso es suficiente para postergar la carga de im\u00e1genes en nuestras p\u00e1ginas hasta que estas im\u00e1genes est\u00e9n en la zona visible del navegador. Adicionalmente se tienen algunas opciones para mejorar el funcionamiento de esta t\u00e9cnica, por ejemplo podemos mostrar una imagen de fondo mientras se carga la imagen e incluso podemos asignar un m\u00ednimo de pixels antes de mostrar las im\u00e1genes.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$(function() {\r\n    $(&quot;img&quot;).lazyload({placeholder : &quot;img\/loading.gif&quot;, threshold : 100});\r\n});\r\n<\/pre>\n<p>En el ejemplo se muestra la imagen loading.gif y se mostrar\u00e1n las im\u00e1genes si es visible mas de 100 pixels de la imagen. Pueden ver el ejemplo funcionando en<a href=\"http:\/\/samples.unijimpe.net\/lazyload\/\"> Lazy Load Demo.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lazy Load es un interesante plugin para jQuery que permite postergar la carga de im\u00e1genes en p\u00e1ginas web largas. Las im\u00e1genes que est\u00e1n fuera de la zona visible no ser\u00e1n&hellip;<\/p>\n","protected":false},"author":1,"featured_media":926,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,25],"tags":[26],"class_list":["post-924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-recursos","tag-jquery"],"_links":{"self":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/comments?post=924"}],"version-history":[{"count":0,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/924\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media\/926"}],"wp:attachment":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media?parent=924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/categories?post=924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/tags?post=924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}