{"id":249,"date":"2013-01-31T21:46:54","date_gmt":"2013-01-31T21:46:54","guid":{"rendered":"http:\/\/blog.luisrodriguez.pe\/?p=249"},"modified":"2017-10-27T15:01:01","modified_gmt":"2017-10-27T15:01:01","slug":"crear-un-precarga-con-jquery","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/","title":{"rendered":"Crear un precarga \/ preload con jquery"},"content":{"rendered":"<p style=\"text-align: justify;\">Buscaba algun plugin para lograr hacer una precargar para mostrar una pantalla donde muestre un gif de loading miestras que por detras esta cargando toda la web ya que algunas veces los proyectos son con muchas peticiones al servidor y esto hace que tarde.<\/p>\n<p style=\"text-align: justify;\">Antes de comenzar con esto hay que hacer algo de conceptos que ayudaran bastante para el peque\u00f1o script :<\/p>\n<p>$(document).ready\u00a0\u00a0 = esto se activa cuando carga todo el <a href=\"http:\/\/es.wikipedia.org\/wiki\/Document_Object_Model\" target=\"_blank\">DOM<\/a>\u00a0 incluso aun que las imagenes\u00a0 no terminen de cargar<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span style=\"color: #009900;\">&#40;<\/span>document<span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">ready<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #009900;\">&#123;<\/span>\n alert<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;document cargo&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>$(window).load = esto se activa cuando toda la pagina termine de cargar <strong>todas las peticiones<\/strong><\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span style=\"color: #009900;\">&#40;<\/span>window<span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">load<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #009900;\">&#123;<\/span>\n alert<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;window cargo&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p style=\"text-align: justify;\">ya con estos concepto la tenemos mas clara para poder armar nuestro script no se olviden de cargar antes JQUERY<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span style=\"color: #009900;\">&#40;<\/span>document<span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">ready<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#123;<\/span>\n        <span style=\"color: #006600; font-style: italic;\">\/\/eliminamos el scroll de la pagina<\/span>\n        $<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;body&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">css<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span><span style=\"color: #3366CC;\">&quot;overflow-y&quot;<\/span><span style=\"color: #339933;\">:<\/span><span style=\"color: #3366CC;\">&quot;hidden&quot;<\/span><span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n        <span style=\"color: #006600; font-style: italic;\">\/\/guardamos en una variable el alto del que tiene tu browser que no es lo mismo que del DOM<\/span>\n        <span style=\"color: #000066; font-weight: bold;\">var<\/span> alto<span style=\"color: #339933;\">=<\/span>$<span style=\"color: #009900;\">&#40;<\/span>window<span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">height<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n        <span style=\"color: #006600; font-style: italic;\">\/\/agregamos en el body un div que sera que ocupe toda la pantalla y se muestra encima de todo<\/span>\n        $<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;body&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">append<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;&amp;lt; div id=&quot;<\/span>pre<span style=\"color: #339933;\">-<\/span>load<span style=\"color: #339933;\">-<\/span>web<span style=\"color: #3366CC;\">&quot;&amp;gt;&amp;lt; div id=&quot;<\/span>imagen<span style=\"color: #339933;\">-<\/span>load<span style=\"color: #3366CC;\">&quot;&amp;gt;&amp;lt; img src=&quot;<\/span>http<span style=\"color: #339933;\">:<\/span><span style=\"color: #006600; font-style: italic;\">\/\/preloaders.net\/preloaders\/359\/Filling%20circles.gif&quot; alt=&quot;&quot; \/&amp;gt;Cargando...&quot;); <\/span>\n        <span style=\"color: #006600; font-style: italic;\">\/\/le damos el alto <\/span>\n       $<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;#pre-load-web&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">css<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span>height<span style=\"color: #339933;\">:<\/span>alto<span style=\"color: #339933;\">+<\/span><span style=\"color: #3366CC;\">&quot;px&quot;<\/span><span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span> \n       <span style=\"color: #006600; font-style: italic;\">\/\/esta sera la capa que esta dento de la capa que muestra un gif <\/span>\n       $<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;#imagen-load&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">css<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span><span style=\"color: #3366CC;\">&quot;margin-top&quot;<\/span><span style=\"color: #339933;\">:<\/span><span style=\"color: #009900;\">&#40;<\/span>alto<span style=\"color: #339933;\">\/<\/span><span style=\"color: #CC0000;\">2<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">-<\/span><span style=\"color: #CC0000;\">30<\/span><span style=\"color: #339933;\">+<\/span><span style=\"color: #3366CC;\">&quot;px&quot;<\/span><span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span> \n<span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span>     \n$<span style=\"color: #009900;\">&#40;<\/span>window<span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">load<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#123;<\/span> \n$<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;#pre-load-web&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">fadeOut<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #CC0000;\">1000<\/span><span style=\"color: #339933;\">,<\/span><span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #009900;\">&#123;<\/span> \n<span style=\"color: #006600; font-style: italic;\">\/\/eliminamos la capa de precarga <\/span>\n$<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #000066; font-weight: bold;\">this<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">remove<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #006600; font-style: italic;\">\/\/permitimos scroll <\/span>\n$<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;body&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">css<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span><span style=\"color: #3366CC;\">&quot;overflow-y&quot;<\/span><span style=\"color: #339933;\">:<\/span><span style=\"color: #3366CC;\">&quot;auto&quot;<\/span><span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span> <span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span> \n&nbsp;\n<span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"css\" style=\"font-family:monospace;\"><span style=\"color: #cc00cc;\">#pre-load-web<\/span> <span style=\"color: #00AA00;\">&#123;<\/span><span style=\"color: #000000; font-weight: bold;\">width<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #933;\">100%<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #000000; font-weight: bold;\">position<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #993333;\">absolute<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #000000; font-weight: bold;\">background<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #cc00cc;\">#92def8<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #000000; font-weight: bold;\">left<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #933;\">0px<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #000000; font-weight: bold;\">top<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #933;\">0px<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #000000; font-weight: bold;\">z-index<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #cc66cc;\">100000<\/span><span style=\"color: #00AA00;\">&#125;<\/span>\n<span style=\"color: #808080; font-style: italic;\">\/*aqui centramos la imagen si coloco margin left -30 es por que la imagen mide 60 *\/<\/span>\n<span style=\"color: #cc00cc;\">#pre-load-web<\/span> <span style=\"color: #cc00cc;\">#imagen-load<\/span><span style=\"color: #00AA00;\">&#123;<\/span><span style=\"color: #000000; font-weight: bold;\">left<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #933;\">50%<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #000000; font-weight: bold;\">margin-left<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #933;\">-30px<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #000000; font-weight: bold;\">position<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #993333;\">absolute<\/span><span style=\"color: #00AA00;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>con este script ya pueden tener un precarga sin necesidad de un plugin y evitan peso<\/p>\n<p>&nbsp;<\/p>\n<p>NOTA: Este articulo lo comparti en el blog de <a href=\"http:\/\/www.cristalab.com\/\">CRISTALAB<\/a>, Lo digo para evitar malos entendidos y comentarios fuera de lugar.<br \/>\n<a href=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-1142\" src=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png\" alt=\"Screenshot_1\" width=\"590\" height=\"152\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png 590w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1-300x77.png 300w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.luisrodriguez.pe\/demos\/jquery_preload.zip\" target=\"_blank\">descargar script de precarga<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Buscaba algun plugin para lograr hacer una precargar para mostrar una pantalla donde muestre un gif de loading miestras que por detras esta cargando toda la web ya que algunas veces los proyectos son con muchas peticiones al servidor y esto hace que tarde. Antes de comenzar con esto hay que hacer algo de conceptos[&#8230;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,14],"tags":[17,16,15],"class_list":["post-249","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","tag-jquery-2","tag-precargardor","tag-preload"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Crear un precarga \/ preload con jquery - Blog Luis Rodriguez<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un precarga \/ preload con jquery - Blog Luis Rodriguez\" \/>\n<meta property=\"og:description\" content=\"Buscaba algun plugin para lograr hacer una precargar para mostrar una pantalla donde muestre un gif de loading miestras que por detras esta cargando toda la web ya que algunas veces los proyectos son con muchas peticiones al servidor y esto hace que tarde. Antes de comenzar con esto hay que hacer algo de conceptos[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-31T21:46:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-27T15:01:01+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Crear un precarga \/ preload con jquery\",\"datePublished\":\"2013-01-31T21:46:54+00:00\",\"dateModified\":\"2017-10-27T15:01:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/\"},\"wordCount\":165,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png\",\"keywords\":[\"jquery\",\"precargardor\",\"preload\"],\"articleSection\":[\"JAVASCRIPT\",\"Jquery\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/\",\"name\":\"Crear un precarga \/ preload con jquery - Blog Luis Rodriguez\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png\",\"datePublished\":\"2013-01-31T21:46:54+00:00\",\"dateModified\":\"2017-10-27T15:01:01+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png\",\"contentUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png\",\"width\":590,\"height\":152},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un precarga \/ preload con jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un precarga \/ preload con jquery - Blog Luis Rodriguez","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/","og_locale":"es_ES","og_type":"article","og_title":"Crear un precarga \/ preload con jquery - Blog Luis Rodriguez","og_description":"Buscaba algun plugin para lograr hacer una precargar para mostrar una pantalla donde muestre un gif de loading miestras que por detras esta cargando toda la web ya que algunas veces los proyectos son con muchas peticiones al servidor y esto hace que tarde. Antes de comenzar con esto hay que hacer algo de conceptos[...]","og_url":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2013-01-31T21:46:54+00:00","article_modified_time":"2017-10-27T15:01:01+00:00","og_image":[{"url":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png","type":"","width":"","height":""}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Crear un precarga \/ preload con jquery","datePublished":"2013-01-31T21:46:54+00:00","dateModified":"2017-10-27T15:01:01+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/"},"wordCount":165,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png","keywords":["jquery","precargardor","preload"],"articleSection":["JAVASCRIPT","Jquery"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/","url":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/","name":"Crear un precarga \/ preload con jquery - Blog Luis Rodriguez","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png","datePublished":"2013-01-31T21:46:54+00:00","dateModified":"2017-10-27T15:01:01+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#primaryimage","url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png","contentUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/01\/Screenshot_1.png","width":590,"height":152},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-precarga-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Crear un precarga \/ preload con jquery"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":18,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}