¿Qué es una carga progresiva?
Una carga progresiva retrasa la carga de elementos de la creatividad (como imágenes) hasta que la página principal termina de cargarse.
 |
Si la página se ha cargado al 20%: se muestra el contenido inicial. |
 |
Si la página se ha cargado al 50%: se mantiene el contenido inicial, no se produce ninguna acción adicional. |
 |
Si la página se ha cargado al 100%: se muestran el contenido adicional y las acciones. |
Studio no requiere que los archivos utilicen la carga progresiva, aunque es posible que sí lo hagan las especificaciones del editor.
Cuando utilice esta función, podrá diseñar su creatividad con una imagen de carga previa, esperar a que la página acabe de cargarse y luego subir recursos adicionales (como imágenes, animaciones o vídeos).
Configurar la carga progresiva en Google Web Designer
Al diseñar creatividades en Google Web Designer, no es necesario que añada ningún código. Después de publicar su archivo (tanto de forma local como a través de Studio), marque la casilla de verificación situada junto a Carga progresiva en la sección Configuración del cuadro de diálogo de la publicación:
Utilizar una imagen de carga previa
Si quiere que se muestre una imagen inicial mientras espera a que se cargue la página, utilice el controlador handleAdInitialized. Más información
Configurar la carga progresiva mediante JavaScript
Añada el siguiente código a su archivo de JavaScript después del código de inicialización del componente Enabler. Este código comprueba si se carga la página mediante el método isPageLoaded del Enabler, que devuelve un valor "true" o "false". Si devuelve el valor "true", ejecute una función personalizada que cargue su creatividad (en este ejemplo, la función personalizada se denomina politeInit). Si devuelve el valor "false", procese el evento PAGE_LOADED del Enabler antes de ejecutar la función politeInit.
Fragmento de código de la carga progresiva
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
// Se ejecuta cuando el Enabler está preparado.
function init() {
if (Enabler.isPageLoaded()) {
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
}
};
// Se ejecuta cuando la página se ha cargado por completo.
function politeInit(){
// Añada el código para ocultar la imagen o la animación de carga y suba los recursos
// de la creatividad o inicie la animación de la creatividad.
};
Utilizar una imagen de carga previa
Si quiere que se muestre una imagen inicial mientras espera a que se cargue la página, puede subir la imagen de carga previa y ocultarla cuando se haya recibido el evento PAGE_LOADED. En los archivos de ejemplo, la imagen de carga se denomina "loading.gif" y su ID de elemento div es "loading_image_dc".