0
187
Vistas¿Cómo activar la cuenta atrás después de cargar la página?
Hay algunos elementos del odómetro en la plantilla que quiero usar para mi sitio web (mi lenguaje de programación es: Asp.net Core):
El efecto de cuenta regresiva ocurre cuando es visible para el usuario (como cuando la página se desplaza hacia eso)
mi problema es que: esta sección está en el banner principal del sitio (debajo del encabezado) y el efecto de cuenta regresiva finaliza antes de que se cargue la página. Porque la página está en la posición deseada de cuenta regresiva antes de cargar
Y cuando se carga la página, ¡solo se muestra el resultado final de la cuenta regresiva! (texto simple sin efecto) :
Este es mi código:
<div class="funfacts-area"> <div class="row"> @foreach (var item in LandingItems) { <div class="col-lg-3 col-md-3 col-6 col-sm-3"> <div class="funfact"> <h3><span class="odometer" data-count="@item.count" dir="ltr">00</span>+</h3> <p>@item.name</p> </div> </div> } </div> </div>Este código solo funciona cuando: Use Ctrl + F5 (borrar caché) en el medio de la página y desplácese hasta el banner superior : El efecto de cuenta regresiva se activa y comienza a contar...
Traté de enviar este código como PartialViewResult para ver después de la carga completa { jquery: windows.onload () }. Pero desafortunadamente, la cuenta regresiva no puede detectar la posición del usuario para la activación de la cuenta regresiva y los valores son 00
¿Cuál es la solución a este problema? Por favor, ayúdame...
2 Respuestas
Responde la pregunta0
Podrías intentar usar EventListener. Se ejecuta después de cargar DOM (antes de img y css):
document.addEventListener("DOMContentLoaded", function(){ //.... });O
Se ejecuta después de que todo está cargado y analizado:
window.addEventListener("load", function(){ // .... })0
Vuelva a valorar el contenido Html para reactivar la cuenta atrás del odómetro:
$(window).on('load', function () { $('.odometer').each(function () { $(this).html("-"); $(this).html($(this).data("count")); });