【发布时间】：2020-08-29 16:25:01
【问题描述】：
我在使用插件 slick 时遇到内存问题。 我使用 .php 文件创建了一个简单的网站。我有 3 页，每页有一个滑块。 在与滑块进行几次交互后，浏览器难以加载页面，并且我在控制台“内存不足”中收到以下错误。我不是 javascript 方面的专家，也不是内存泄漏方面的专家。如果有人可以帮助我理解这个问题，我将不胜感激。谢谢。
这是我整个网站的主要 javascript 文件：
// on index.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
// on page2.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
// on page3.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
//I cannot share the source code for legal reasons but basically this is the html stucture. On the actual project, I use images.
var opt1 = {
dots: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
speed: 300,
variableWidth: true,
arrows: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]'),
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
]
}
var opt2 = {
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 300,
arrows: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]')
}
var opt3 = {
dots: false,
infinite: false,
slidesToShow: 3,
slidesToScroll: 0,
speed: 300,
arrows: false,
centerMode: false,
variableWidth: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]'),
responsive: [
{
breakpoint: 1197,
settings: {
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
centerMode: false
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 761,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
}
$(document).ready(function(){
var gadgetCarousel = $(".slider");
gadgetCarousel.each(function() {
if ($(this).is(".one")) {
$(this).slick($(opt1));
}
else if ($(this).is(".two")){
$(this).slick($(opt2));
}
else if ($(this).is(".three")){
$(this).slick($(opt3));
}
else {
$(this).slick();
}
})
}
【问题讨论】：
-
尝试使用 chrome 性能工具，您可能无法准确了解您正在查看的内容，但它可能有助于了解正在发生的事情
-
要粘贴您的标记吗？
-
我添加了html
-
您是否有可能在每个页面上多次包含 jQuery 或 Slick JavaScript 库？
-
不，因为我在我的 footer.php 中调用了脚本，该脚本包含在每个页面中
标签： javascript php out-of-memory slick.js