{"id":2446,"date":"2012-03-27T21:26:22","date_gmt":"2012-03-27T21:26:22","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2446"},"modified":"2019-04-09T10:34:07","modified_gmt":"2019-04-09T10:34:07","slug":"efecto-cargando-con-jquery-ajax","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/","title":{"rendered":"Loading – Efecto cargando con jQuery Ajax"},"content":{"rendered":"

El efecto loading<\/strong> o carga de contenido puede resultar muy \u00fatil en seg\u00fan que situaciones para simular el efecto de carga de datos al usuario. En algunas p\u00e1ginas Webs has podido observar que cuando haces una petici\u00f3n ya sea pulsando un bot\u00f3n o un enlace te hacen esperar un poco para cargar el contenido.<\/p>\n

En este art\u00edculo te vamos a explicar como conseguir este efecto de simulaci\u00f3n de carga de contenido con jQuery<\/strong>, Ajax<\/strong> y PHP<\/strong>.<\/p>\n

En el ejemplo que vamos a ilustrar vamos a tener un bot\u00f3n que tras pulsarlo aparece un mensaje de carga junto con una imagen .gif que tiene como el efecto de \u00abcargando…\u00bb. Veremos como hacer esta solicitud con Ajax<\/strong>.<\/p>\n

Es m\u00e1s sencillo de lo que parece. Para hacer funcionar esto, necesitas incorporar en la cabecera o etiqueta <head> de tu p\u00e1gina la librer\u00eda jQuery. Puedes hacerlo de la siguiente forma:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> src<\/span>=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En el cuerpo o etiqueta <body> de tu p\u00e1gina puedes agregar el bot\u00f3n que ejecuta la acci\u00f3n:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"btn btn-secondary button"<\/span>><\/span>\n     <i<\/span><\/a> class<\/span>=<\/span>"fa fa-eye"<\/span>><\/<\/span>i<\/span><\/a>><\/span> Ver efecto\n<\/<\/span>a<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Es importante fijarse bien en el class \u00abbutton\u00bb de este elemento ya que ser\u00e1 la clave para controlar el evento.<\/p>\n
Tambi\u00e9n en la cabecera o dentro de la etiqueta <head> o incluso justo antes de la etiqueta de cierre <\/body> puedes incorporar la llamada al evento:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>    \n    $(<\/span>'.button'<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n        \/\/A\u00f1adimos la imagen de carga en el contenedor<\/span>\n        $(<\/span>'#content'<\/span>)<\/span>.html<\/span>(<\/span>'<div class="loading"><img src="images\/loader.gif" alt="loading" \/><br\/>Un momento, por favor...<\/div>'<\/span>)<\/span>;<\/span>\n \n        $.ajax<\/span>(<\/span>{<\/span>\n            type:<\/span> "POST"<\/span>,<\/span>\n            url:<\/span> "ajax.php"<\/span>,<\/span>\n            success:<\/span> function<\/span>(<\/span>data)<\/span> {<\/span>\n                \/\/Cargamos finalmente el contenido deseado<\/span>\n                $(<\/span>'#content'<\/span>)<\/span>.fadeIn<\/span>(<\/span>1000)<\/span>.html<\/span>(<\/span>data)<\/span>;<\/span>\n            }<\/span>\n        }<\/span>)<\/span>;<\/span>\n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>              \n}<\/span>)<\/span>;<\/span>    \n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
En este caso, al hacer click en el bot\u00f3n que hemos creado, a\u00f1adimos la imagen de carga en el contenedor acompa\u00f1ada de un mensaje conocido, \u00abUn momento, por favor…\u00bb y justo despu\u00e9s hacemos una llamada Ajax<\/strong> que procesar\u00e1 cualquier petici\u00f3n en el servidor que estar\u00e1 en el archivo ajax.php.<\/p>\n
Este archivo ajax.php que contiene?<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\nsleep<\/span><\/a>(<\/span>1)<\/span>;<\/span>\necho<\/span> 'Hola. Soy el nuevo contenido que viene del servidor!'<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
En el caso del ejemplo tan solo estamos parando la ejecuci\u00f3n un segundo y retornamos mediante un echo un mensaje. En este archivo puedes hacer cualquier cosa que puedas imaginar con los datos, guardarlos en una base de datos, guardarlos en un fichero, enviarlos por email, etc.<\/p>\n
En este ejemplo no ha hecho falta pasar par\u00e1metros a la llamada Ajax pero debes saber que es posible y tenemos muchos tutoriales en este blog con ejemplos de llamadas Ajax con par\u00e1metros.<\/p>\n
Finalmente, f\u00edjate bien en lo que hemos hecho dentro del success de la llamada Ajax<\/strong>. Los datos que retorna el archivo \u00abajax.php\u00bb los cargamos dentro del contenedor con id=\u00bbcontent\u00bb.<\/p>\n
Puedes generar y descargar im\u00e1genes de loading en Ajaxload<\/a>.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
C\u00f3digo de ejemplo que te permite agregar a tu p\u00e1gina Web el efecto cargando contenido (loading) utilizando las tecnolog\u00edas jQuery, Ajax y PHP.<\/p>\n","protected":false},"author":1,"featured_media":7264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,5,3],"tags":[74,129],"class_list":["post-2446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","category-php","tag-contenedores","tag-loading"],"yoast_head":"\nLoading - Efecto cargando con jQuery Ajax - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"C\u00f3digo de ejemplo que te permite agregar a tu p\u00e1gina Web el efecto cargando contenido (loading) utilizando las tecnolog\u00edas jQuery, Ajax y PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Loading - Efecto cargando con jQuery Ajax - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"C\u00f3digo de ejemplo que te permite agregar a tu p\u00e1gina Web el efecto cargando contenido (loading) utilizando las tecnolog\u00edas jQuery, Ajax y PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-27T21:26:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-09T10:34:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/\",\"name\":\"Loading - Efecto cargando con jQuery Ajax - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png\",\"datePublished\":\"2012-03-27T21:26:22+00:00\",\"dateModified\":\"2019-04-09T10:34:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"C\u00f3digo de ejemplo que te permite agregar a tu p\u00e1gina Web el efecto cargando contenido (loading) utilizando las tecnolog\u00edas jQuery, Ajax y PHP.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Loading – Efecto cargando con jQuery Ajax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Loading - Efecto cargando con jQuery Ajax - Jose Aguilar Blog","description":"C\u00f3digo de ejemplo que te permite agregar a tu p\u00e1gina Web el efecto cargando contenido (loading) utilizando las tecnolog\u00edas jQuery, Ajax y PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Loading - Efecto cargando con jQuery Ajax - Jose Aguilar Blog","og_description":"C\u00f3digo de ejemplo que te permite agregar a tu p\u00e1gina Web el efecto cargando contenido (loading) utilizando las tecnolog\u00edas jQuery, Ajax y PHP.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-27T21:26:22+00:00","article_modified_time":"2019-04-09T10:34:07+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/","url":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/","name":"Loading - Efecto cargando con jQuery Ajax - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png","datePublished":"2012-03-27T21:26:22+00:00","dateModified":"2019-04-09T10:34:07+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"C\u00f3digo de ejemplo que te permite agregar a tu p\u00e1gina Web el efecto cargando contenido (loading) utilizando las tecnolog\u00edas jQuery, Ajax y PHP.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/efecto-cargando-con-jquery.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/efecto-cargando-con-jquery-ajax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Loading – Efecto cargando con jQuery Ajax"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2446"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2446\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7264"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}