Javascript 滑出记忆的旋转木马
我使用插件时出现内存问题。 我使用.php文件创建了一个简单的网站。我有3个页面，每个页面上有一个滑块。 浏览器在与滑块进行几次交互后，很难加载页面，我在控制台中遇到以下错误“内存不足”。我不是javascript方面的专家，也不是内存泄漏方面的专家。如果有人能帮我理解这个问题，我将不胜感激。谢谢 以下是我整个网站的主要javascript文件：Javascript 滑出记忆的旋转木马,javascript,php,out-of-memory,slick.js,Javascript,Php,Out Of Memory,Slick.js,我使用插件时出现内存问题。 我使用.php文件创建了一个简单的网站。我有3个页面，每个页面上有一个滑块。 浏览器在与滑块进行几次交互后，很难加载页面，我在控制台中遇到以下错误“内存不足”。我不是javascript方面的专家，也不是内存泄漏方面的专家。如果有人能帮我理解这个问题，我将不胜感激。谢谢 以下是我整个网站的主要javascript文件： // on index.php <div class="slider one"> <div>your
// 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();
}
})
}
//在index.php上
你的内容
你的内容
你的内容
你的内容
你的内容
你的内容
//在第2.php页
你的内容
你的内容
你的内容
你的内容
你的内容
你的内容
//在第3.php页
你的内容
你的内容
你的内容
你的内容
你的内容
你的内容
//出于法律原因，我无法共享源代码，但基本上这是html结构。在实际项目中，我使用图像。
变量opt1={
点：错，
无限：是的，
幻灯片放映：4，
幻灯片滚动：1，
速度:300,，
可变宽度：true，
箭头：是的，
prevArrow:$（“[data prev=“prevButton”]”），
nextArrow:$（'[data next=“nextButton”]'），
响应：[
{
断点：769，
设置：{
幻灯片放映：2，
幻灯片滚动：1，
}
},
]
}
var opt2={
点：错，
无限：是的，
幻灯片放映：1，
幻灯片滚动：1，
速度:300,，
箭头：是的，
prevArrow:$（“[data prev=“prevButton”]”），
nextArrow:$（'[data next=“nextButton”]'）
}
var opt3={
点：错，
无限：错，
幻灯片放映：3，
幻灯片滚动：0，
速度:300,，
箭头：错，
centerMode:false，
可变宽度：true，
prevArrow:$（“[data prev=“prevButton”]”），
nextArrow:$（'[data next=“nextButton”]'），
响应：[
{
断点：1197，
设置：{
无限：是的，
幻灯片放映：2，
幻灯片滚动：1，
centerMode:错误
}
},
{
断点：769，
设置：{
幻灯片放映：2，
幻灯片滚动：1，
}
},
{
断点：761，
设置：{
幻灯片放映：1，
幻灯片滚动：1，
}
}
]
}
$（文档）.ready（函数（）{
var gadgedcarousel=$（“.slider”）；
gadgetCarousel.each（函数（）{
如果（$（this）.is（“.one”））{
美元（这个）.slick（$（opt1））；
}
如果（$（this）.is（“.two”））{
美元（这个）。光滑（$（opt2））；
}
如果（$（this）.is（“.three”））{
美元（这个）.slick（$（opt3））；
}
否则{
$（这个）；
}
})
}