Un usuario preguntó 👇
Enlaces:
https://daneden.github.io/animate.css/
https://jjcosgrove.github.io/jquery-aniview/
Ok, esta vez intenté excluir JS wp-content / theme / otzerling / jquery.aniview.js, wp-content / theme / otzerling / script.js
y CSS wp-content / theme / otzerling / animate.css
y utilice bloques de intento de captura.
También estoy publicando código JS código Aniview en caso de que sea útil:
<script>
$(document).ready(function() {
var options = {
animateThreshold: 00,
scrollPollInterval: 30
};
$('.aniview').AniView(options);
$('.code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>Dentro de jquery.aniview
(function($) {
//custom scroll replacement to allow for interval-based 'polling'
//rather than checking on every pixel.
var uniqueCntr = 0;
$.fn.scrolled = function(waitTime, fn) {
if (typeof waitTime === 'function') {
fn = waitTime;
waitTime = 200;
}
var tag = 'scrollTimer' + uniqueCntr++;
this.scroll(function() {
var self = $(this);
clearTimeout(self.data(tag));
self.data(tag, setTimeout(function() {
self.removeData(tag);
fn.call(self[0]);
}, waitTime));
});
};
$.fn.AniView = function(options) {
//some default settings. animateThreshold controls the trigger point
//for animation and is subtracted from the bottom of the viewport.
var settings = $.extend({
animateThreshold: 0,
scrollPollInterval: 20
}, options);
//keep the matched elements in a variable for easy reference
var collection = this;
//cycle through each matched element and wrap it in a block/div
//and then proceed to fade out the inner contents of each matched element
$(collection).each(function(index, element) {
$(element).wrap('<div class="av-container"></div>');
$(element).css('opacity', 0);
});
/**
* returns boolean representing whether element's top is coming into bottom of viewport
*
* @param HTMLDOMElement element the current element to check
*/
function EnteringViewport(element) {
var elementTop = $(element).offset().top;
var viewportBottom = $(window).scrollTop() + $(window).height();
return (elementTop < (viewportBottom - settings.animateThreshold)) ? true : false;
}
/**
* cycle through each element in the collection to make sure that any
* elements which should be animated into view, are...
*
* @param collection of elements to check
*/
function RenderElementsCurrentlyInViewport(collection) {
$(collection).each(function(index, element) {
var elementParentContainer = $(element).parent('.av-container');
if ($(element).is('[data-av-animation]') && !$(elementParentContainer).hasClass('av-visible') && EnteringViewport(elementParentContainer)) {
$(element).css('opacity', 1);
$(elementParentContainer).addClass('av-visible');
$(element).addClass('animated ' + $(element).attr('data-av-animation'));
}
});
}
//on page load, render any elements that are currently/already in view
RenderElementsCurrentlyInViewport(collection);
//enable the scrolled event timer to watch for elements coming into the viewport
//from the bottom. default polling time is 20 ms. This can be changed using
//'scrollPollInterval' from the user visible options
$(window).scrolled(settings.scrollPollInterval, function() {
RenderElementsCurrentlyInViewport(collection);
});
};
})(jQuery);El archivo «script.js» no parece cargarse, era mi primer sitio web, por lo que era un poco confuso. Cambiar el nombre de este archivo no tiene ningún efecto en la instalación local.
Este tema fue modificado hace 1 año, 9 meses por.
(@optimizingmatters)
Hace 1 año, 9 meses
Bueno, AO parece estar apagado ahora, pero veo otro error JS en la consola
Error de referencia: requisito no definido
que puede estar «proliferando» y rompiendo el archivo JS autoptimizado, así que mira el primero, ¿quizás?
Lanzador de hilos
(@ snippet24)
Hace 1 año, 9 meses
Permítanme arreglar el menú que no funciona en el otro contenido primero, cuando funcione, volveré a habilitar AO para que pueda hacer más depuración. También investigaré ese error en la consola. Saludos, Thomas
Lanzador de hilos
(@ snippet24)
Hace 1 año, 8 meses
Bueno, terminé deshabilitando la unificación tanto en js como en CSS … lo dicho aquí es solo una suposición, ¿tal vez la animación no funciona porque aniview requiere cargar previamente animate.css? También tengo una pregunta que puede ser tonta: ¿cómo sabe Autoptimize cuándo un script necesita cargar otro primero? ¿No debería haber reglas para establecer eso para scripts unificados?
Esta respuesta fue modificada hace 1 año, 8 meses por. Esta respuesta fue modificada hace 1 año, 8 meses por.
(@optimizingmatters)
Hace 1 año, 8 meses
Bueno, terminé deshabilitando la unificación tanto en js como en CSS.
Pero, ¿qué sucede si deshabilita la optimización JS (o agregación) y mantiene CSS activado?
También tengo una pregunta que puede ser tonta: ¿cómo sabe Autoptimize cuando un script requiere cargar otro primero? ¿No debería haber reglas para establecer eso para scripts unificados?
sencillo; si es posible, AO solo mantiene el comando CSS / JS recibido en HTML, porque está activo mucho después de que termine la puesta en cola de WordPress (que se ocupa de las dependencias).
Por cierto; Todavía veo el Reference Error: require is not defined error, sigo pensando que es por eso que la optimización JS no funciona.
Lanzador de hilos
(@ snippet24)
Hace 1 año, 8 meses
sencillo; si es posible, AO solo mantiene el comando CSS / JS recibido en HTML, porque está activo mucho después de que termine la puesta en cola de WordPress (que se ocupa de las dependencias).
: pulgares:
Pero, ¿qué sucede si deshabilita la optimización JS (o agregación) y mantiene CSS activado?
Okey, intentaré darme unos minutos.
Lanzador de hilos
(@ snippet24)
Hace 1 año, 8 meses
agregación css habilitada … la animación funciona, por lo que debe ser javascript …
Editar: verifique el error de la consola, ese código está relacionado con «cargar más botones» con wordpress ajax, así que ese es el problema.
Estoy planeando usar variables y solo usar un script, pero mi javascript es básico ahora … 🙁
Esta respuesta fue modificada hace 1 año, 8 meses por. Esta respuesta fue modificada hace 1 año, 8 meses por. Esta respuesta fue modificada hace 1 año, 8 meses por.
(@optimizingmatters)
Hace 1 año, 8 meses
De acuerdo, siguiente; ¿Puede intentar desactivar los «agregados de JS» y / o las «desventajas excluidas de CSS / JS»?
Lanzador de hilos
(@ snippet24)
Hace 1 año, 8 meses
Bien, «agregate JS» está deshabilitado ahora y vivo … perdón por la respuesta tardía.
(@optimizingmatters)
Hace 1 año, 8 meses
De acuerdo, ¿su animación todavía funciona cuando el «JS agregado» está obsoleto?
Lanzador de hilos
(@ snippet24)
Hace 1 año, 8 meses
Si.
(@optimizingmatters)
Hace 1 año, 8 meses
ok, cuando hay «JS agregado» y lo agregas aniview con la lista de exclusiones optimizadas de JS separadas por comas, ¿qué sucede entonces?
(aunque no estoy seguro de su archivo scripts.js, ¿qué incluye / incluye?)
Lanzador de hilos
(@ snippet24)
Hace 1 año, 8 meses
ok, cuando hay un «JS agregado» y agrega una vista a la lista separada por comas de exclusiones de JS optimizadas, ¿qué sucede entonces?
La animación no funciona …
Sin embargo, no estoy seguro de su archivo scripts.js, ¿qué incluye / incluye?)
No estoy seguro de si estoy cargando ese script. Se cambió el nombre del archivo y no sucedió nada (las animaciones aún funcionan). De todos modos, el código interior es:
$(document).ready(function() {
var options = {
animateThreshold: 100
};
$('.aniview').AniView(options);
$('.code').each(function(i, block) {
hljs.highlightBlock(block);
});
});(@optimizingmatters)
Hace 1 año, 8 meses
ok, el problema animado parece depender de una versión no predeterminada de jQuery, que se carga antes que el jQuery normal. intenta sembrar otzerling/js/vendor/jquery-3.2.1.min.js con la lista de exclusión?
Lanzador de hilos
(@ snippet24)
Hace 1 año, 8 meses
Que el era !! 😀 elimine también las versiones anteriores de jquery … ¡¡¡Gracias por todo !!! Saludos, Thomas
Esta respuesta fue modificada hace 1 año, 8 meses por.
(@optimizingmatters)
Hace 1 año, 8 meses
de nada Tomás 🙂
¿Solucionó tu problema??
0 / 0