Answer the question
In order to leave comments, you need to log in
How to optimize js code?
Good day to all.
I'm using the lazy-line-painter.js library ( lazylinepainter.info ) for lazy line drawing of svg images.
It so happened that there are about 20 such images.
They are drawn after hovering the mouse over a block with the desired id
Everywhere different id blocks and images
Frequent calls to the DOM, etc. heavily load the site, up to 3 seconds.
Can you please tell me how to optimize this code, or some tricks to speed up the download?
// элемент на который наводим
let audit = document.querySelector('#audit__block');
let schit = document.querySelector('#schit__block');
// ID нужного изображения
let auditSvg = document.querySelector('#auditobject');
let schitSvg = document.querySelector('#schitok');
// добавляем и удаляем класс при наведении с display:block
audit.onmouseover = function(e) {
document.querySelector('#audit').classList.add('svg_vision');
}
audit.onmouseout = function(e) {
document.querySelector('#audit').classList.remove('svg_vision');
}
schit.onmouseover = function(e) {
document.querySelector('#schit').classList.add('svg_vision');
document.querySelector('#audit').style.display = 'none';
}
schit.onmouseout = function(e) {
document.querySelector('#schit').classList.remove('svg_vision');
document.querySelector('#audit').style.display = 'block';
}
// инициализация и свойства отрисовки анимации
let auditAnimation = new LazyLinePainter(auditSvg, {
strokeColor: '#cc2d8a',
strokeWidth: 0.5,
ease: 'easeInOutExpo'
});
let schitAnimation = new LazyLinePainter(schitSvg, {
strokeColor: '#cc2d8a',
strokeWidth: 0.2,
ease: 'easeInOutExpo'
});
audit.addEventListener('mouseover', paintAudit, false);
schit.addEventListener('mouseover', paintSchit, false);
function paintAudit(){
auditAnimation.paint();
}
function paintSchit(){
schitAnimation.paint();
}
paintAudit();
paintSchit();
Answer the question
In order to leave comments, you need to log in
The main reason for the brakes is the getPointAtLength method , it eats up a lot of time when initializing the library. You can try to fork the lib and cut out the _getPathPoints method from it and fix all the methods that depend on it. This should help.
An easier way is to use another library like animejs .
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question