[ad_1]
I wrote a js code like this for a web site. It really works effectively on PC browsers in addition to on Android’s browsers, however not on iOS. It is form of lagging when I attempt to run it on iOS. The photographs grow to be blur and leaping out,… and so forth.
Can somebody give me some recommendation on the best way to repair this?
Demo video describing the issue
// console.log = perform() {}
var fbPics = [
'./assets/img/fback/001.jpg',
'./assets/img/fback/002.jpeg',
'./assets/img/fback/003.jpg',
'./assets/img/fback/004.jpg',
'./assets/img/fback/005.jpg',
'./assets/img/fback/006.png'
];
var dispPics = [
'./assets/img/fback/001.jpg',
'./assets/img/fback/002.jpeg',
'./assets/img/fback/003.jpg',
'./assets/img/fback/004.jpg'
];
beginning();
setTimeout(perform() {
f5slide(1);
f5slide(-1);
}, 1);
var a = 1, b = 2, c = 3, d = 4;
var i = 0;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
perform f5slide(j) {
i = i+j;
if (i > 5) {i = 0}
else if (i < 0) {i = 5}
console.log('i now: ' + i);
change(i) {
case 3:
dispPics[0]=fbPics[i];
dispPics[1]=fbPics[i+1];
dispPics[2]=fbPics[i+2];
dispPics[3]=fbPics[0];
break;
case 4:
dispPics[0]=fbPics[i];
dispPics[1]=fbPics[i+1];
dispPics[2]=fbPics[0];
dispPics[3]=fbPics[1];
break;
case 5:
dispPics[0]=fbPics[i];
dispPics[1]=fbPics[0];
dispPics[2]=fbPics[1];
dispPics[3]=fbPics[2];
break;
default:
dispPics[0]=fbPics[i];
dispPics[1]=fbPics[i+1];
dispPics[2]=fbPics[i+2];
dispPics[3]=fbPics[i+3];
}
console.log('');
// i = i+j;
showFbs(j);
}
perform beginning() {
var createdStyleTag = doc.createElement("fashion");
createdStyleTag.id = 'babyOri';
createdStyleTag.innerHTML =
`
.img-no_1 {
width: 294px;
peak: 524px;
background-image: url('${dispPics[0]}');
background-size: cowl;
background-position: middle;
place: absolute;
high: 50%;
left: 25%;
rework: translate3d(-50%, -50%, 0);
filter: blur(5px);
opacity: .6;
object-fit: cowl;
border-radius: 20px;
}
.img-no_2 {
width: 361px;
peak: 644px;
background-image: url('${dispPics[1]}');
background-size: cowl;
background-position: middle;
place: absolute;
high: 50%;
left: 50%;
rework: translate3d(-50%, -50%, 0);
object-fit: cowl;
z-index: 1;
border-radius: 20px;
filter: drop-shadow(11px 15px 5px rgba(0, 0, 0, 0.65));
}
.img-no_3 {
width: 294px;
peak: 524px;
background-image: url('${dispPics[2]}');
background-size: cowl;
background-position: middle;
place: absolute;
high: 50%;
left: 75%;
rework: translate3d(-50%, -50%, 0);
filter: blur(5px);
opacity: .6;
object-fit: cowl;
border-radius: 20px;
}
.img-no_4 {
peak: 0;
width: 0;
background-image: url('${dispPics[2]}');
background-size: cowl;
background-position: middle;
place: absolute;
high: 50%;
left: 75%;
rework: translate3d(-50%, -50%, 0)
}
`
doc.physique.appendChild(createdStyleTag);
// showFbs(1);
}
perform showFbs(j) {
if (j === 1) {
if (a<4) {a++;} else {a = 1;};
if (b<4) {b++;} else {b = 1;};
if (c<4) {c++;} else {c = 1;};
if (d<4) {d++;} else {d = 1;};
} else {
if (a>1) {a--;} else {a = 4;};
if (b>1) {b--;} else {b = 4;};
if (c>1) {c--;} else {c = 4;};
if (d>1) {d--;} else {d = 4;};
}
if (doc.getElementById('child'))
{
setTimeout(perform() {
doc.physique.removeChild(doc.getElementById('child'));}
,400);
} else {console.log('nope!!')};
console.log(a);
console.log(b);
console.log(c);
console.log(d);
var createdStyleTag = doc.createElement("fashion");
createdStyleTag.id = 'child';
createdStyleTag.innerHTML =
`
.img-no_${a} {
width: 0;
peak: 0;
}
.img-no_${b} {
width: 294px;
peak: 524px;
background-image: url('${dispPics[0]}');
background-size: cowl;
background-position: middle;
place: absolute;
high: 50%;
left: 25%;
rework: translate3d(-50%, -50%, 0);
// filter: blur(5px);
// opacity: .6;
filter: drop-shadow(11px 15px 5px rgba(0, 0, 0, 0.65));
object-fit: cowl;
border-radius: 20px;
}
.img-no_${c} {
width: 361px;
peak: 644px;
background-image: url('${dispPics[1]}');
background-size: cowl;
background-position: middle;
place: absolute;
high: 50%;
left: 50%;
rework: translate3d(-50%, -50%, 0);
// filter: drop-shadow(11px 15px 5px rgba(0, 0, 0, 0.65));
// width: auto;
// peak: auto;
object-fit: cowl;
border-radius: 20px;
}
.img-no_${d} {
width: 294px;
peak: 524px;
background-image: url('${dispPics[2]}');
background-size: cowl;
background-position: middle;
place: absolute;
high: 50%;
left: 75%;
rework: translate3d(-50%, -50%, 0);
// filter: blur(5px);
// opacity: .6;
// filter: drop-shadow(11px 15px 5px rgba(0, 0, 0, 0.65));
object-fit: cowl;
border-radius: 20px;
}
`;
doc.physique.appendChild(createdStyleTag);
console.log(doc.querySelector(`.img-no_${b}`));
//documentStyleSet
doc.querySelector(`.img-no_${c}`).fashion.zIndex = "1";
doc.querySelector(`.img-no_${a}`).fashion.zIndex = "0";
doc.querySelector(`.img-no_${b}`).fashion.zIndex = "0";
doc.querySelector(`.img-no_${d}`).fashion.zIndex = "0";
doc.querySelector(`.img-no_${c}`).src = dispPics[1];
setTimeout(perform() {
// doc.querySelector(`.img-no_${b}`).removeAttribute('src');
doc.querySelector(`.img-no_${d}`).removeAttribute('src');}, 1000);
doc.querySelector(`.img-no_${c}`).fashion.filter = "drop-shadow(11px 15px 5px rgba(0, 0, 0, 0.65))";
doc.querySelector(`.img-no_${b}`).fashion.filter = "blur(5px)";
doc.querySelector(`.img-no_${d}`).fashion.filter = "blur(5px)";
doc.querySelector(`.img-no_${c}`).fashion.opacity = "1";
doc.querySelector(`.img-no_${b}`).fashion.opacity = ".6";
doc.querySelector(`.img-no_${d}`).fashion.opacity = ".6";
setTimeout(perform() {
if (doc.getElementById('babyOri')) {doc.physique.removeChild(doc.getElementById('babyOri'));}
}, 1000);
console.log('');
}
[ad_2]
