我正在使用marquee3000插件。如果有任何静态数据,它将很好地工作。但是当我尝试使其动态时,如果在加载时没有数据,则CPU使用率将达到100%,并且由于该当前页面使用率的高使用率,整个系统都将挂起。
插件链接:https://github.com/ezekielaquino/Marquee3000
请检查以下示例,您可以在其中检查此错误:
/**
* MARQUEE 3000 MARQUEE 3000 MARQUEE 3000 MARQUEE 3000 MARQUEE 3000
* http://github.com/ezekielaquino/marquee3000
* Marquees for the new millenium v1.0
* MIT License
*/
;(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.Marquee3k = factory();
}
}(this, function() {
'use strict';
class Marquee3k {
constructor(element, options) {
this.element = element;
this.selector = options.selector;
this.speed = element.dataset.speed || 0.25;
this.pausable = element.dataset.pausable;
this.reverse = element.dataset.reverse;
this.paused = false;
this.parent = element.parentElement;
this.parentProps = this.parent.getBoundingClientRect();
this.content = element.children[0];
this.innerContent = this.content.innerHTML;
this.wrapStyles = '';
this.offset = 0;
this._setupWrapper();
this._setupContent();
this._setupEvents();
this.wrapper.appendChild(this.content);
this.element.appendChild(this.wrapper);
}
_setupWrapper() {
this.wrapper = document.createElement('div');
this.wrapper.classList.add('marquee3k__wrapper');
this.wrapper.style.whiteSpace = 'nowrap';
}
_setupContent() {
this.content.classList.add(`${this.selector}__copy`);
this.content.style.display = 'inline-block';
this.contentWidth = this.content.offsetWidth;
this.requiredReps = this.contentWidth > this.parentProps.width ? 2 : Math.ceil((this.parentProps.width - this.contentWidth) / this.contentWidth) + 1;
for (let i = 0; i < this.requiredReps; i++) {
this._createClone();
}
if (this.reverse) {
this.offset = this.contentWidth * -1;
}
this.element.classList.add('is-init');
}
_setupEvents() {
this.element.addEventListener('mouseenter', () => {
if (this.pausable) this.paused = true;
});
this.element.addEventListener('mouseleave', () => {
if (this.pausable) this.paused = false;
});
}
_createClone() {
const clone = this.content.cloneNode(true);
clone.style.display = 'inline-block';
clone.classList.add(`${this.selector}__copy`);
this.wrapper.appendChild(clone);
}
animate() {
if (!this.paused) {
const isScrolled = this.reverse ? this.offset < 0 : this.offset > this.contentWidth * -1;
const direction = this.reverse ? -1 : 1;
const reset = this.reverse ? this.contentWidth * -1 : 0;
if (isScrolled) this.offset -= this.speed * direction;
else this.offset = reset;
this.wrapper.style.whiteSpace = 'nowrap';
this.wrapper.style.transform = `translate(${this.offset}px, 0) translateZ(0)`;
}
}
_refresh() {
this.contentWidth = this.content.offsetWidth;
}
repopulate(difference, isLarger) {
this.contentWidth = this.content.offsetWidth;
if (isLarger) {
const amount = Math.ceil(difference / this.contentWidth) + 1;
for (let i = 0; i < amount; i++) {
this._createClone();
}
}
}
static refresh(index) {
MARQUEES[index]._refresh();
}
static refreshAll() {
for (let i = 0; i < MARQUEES.length; i++) {
MARQUEES[i]._refresh();
}
}
static init(options = { selector: 'marquee3k' }) {
window.MARQUEES = [];
const marquees = Array.from(document.querySelectorAll(`.${options.selector}`));
let previousWidth = window.innerWidth;
let timer;
for (let i = 0; i < marquees.length; i++) {
const marquee = marquees[i];
const instance = new Marquee3k(marquee, options);
MARQUEES.push(instance);
}
animate();
function animate() {
for (let i = 0; i < MARQUEES.length; i++) {
MARQUEES[i].animate();
}
window.requestAnimationFrame(animate);
}
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => {
const isLarger = previousWidth < window.innerWidth;
const difference = window.innerWidth - previousWidth;
for (let i = 0; i < MARQUEES.length; i++) {
MARQUEES[i].repopulate(difference, isLarger);
}
previousWidth = this.innerWidth;
});
}, 250);
}
}
return Marquee3k;
}));
Marquee3k.init()
<div class="marquee3k" data-speed="0.25" data-reverse="bool" data-pausable="bool">
<!--Just remove content of h2 tag and your page becomes unresponsive -->
<!--Please open your task manager for clear view -->
<h4>Some marquee content</h4>
</div>
如果将此h2标签内容设置为空,则页面将无响应。