Я написал скрипт, который загружает изображения динамически. При нажатии на изображение появится всплывающее окно с изображением.
Кто-нибудь знает, почему этот скрипт работает медленно в Google Chrome.
I ' До сих пор мы тестировали в Inte rnet Explorer, Edge, Firefox и Opera, где точно такой же скрипт запускается без проблем.
body.noscroll{
position: fixed;
overflow-y: scroll;
width: 100%;
}
.image-popup div:after {
content: "X";
top: 9px;
background: red;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 43px;
text-align: center;
color: white;
font-size: 28px;
font-weight: bold;
cursor: pointer;
position: absolute;
margin-left: 10px;
}
.image-popup img {
height: 95%;
margin: 1.25% auto;
}
.image-popup .navbtn {
height: 100%;
line-height: 100vh;
color: white;
font-family: 'Just Another Hand';
position: absolute;
top: 0px;
cursor: pointer;
}
.image-popup .navbtn#prev {
margin-left: -37px;
background: url(https://files.casa-elcorasueno.com/image/btn_prev.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 15px;
}
.image-popup .navbtn#next {
margin-left: 17px;
background: url(https://files.casa-elcorasueno.com/image/btn_next.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 15px;
}
.image-popup {
display: none;
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.95);
z-index: 2;
}
.image-popup div {
height: 100%;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
text-align: center;
}
.photos {
width: 1040px;
margin: 0 auto;
margin-bottom: -5px;
}
.photos:after {
content: "";
display: block;
clear: both;
}
.photos div {
width: 256px;
float: left;
height: 260px;
margin-right: 5px;
margin-bottom: 5px;
background-size: cover !important;
}
.photos div button {
margin: 0px;
padding: 0px;
border: 0px;
width: 256px;
height: 260px;
background: url('https://files.casa-elcorasueno.com/image/enlarge.png') #0000007a;
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
<html>
<body>
<span id="pageName">Voorbeeld</span>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$images = [
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_1.jpg",
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_2.jpg",
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_3.jpg",
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_6.jpg",
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_5.jpg",
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_4.jpg",
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_7.jpg",
"https://files.casa-elcorasueno.com/image/kamers/sol/sol_8.jpg"
];
$(window).on("load")
{
$box = $("<section></section>");
$currentId = 0;
$($box).addClass("photos");
$box.insertAfter("#pageName");
$popup = $('<div class="image-popup"></div>');
$popup_sub = $("<div></div>");
$($popup).append($popup_sub);
$("body").prepend($popup);
$popupimg = $('<img src="">');
$prevbtn = $('<span class="navbtn" id="prev"></span>');
$nextbtn = $('<span class="navbtn" id="next"></span>');
$($popup_sub).append($prevbtn);
$($popup_sub).append($popupimg);
$($popup_sub).append($nextbtn);
for($i = 0; $i < $images.length; $i++)
{
$elem = $("<div></div>");
$btn = $("<button></button>");
$btn.attr("data-id",$i);
$subelem = $($elem).append($btn);
$($elem).css("background", "url('" + $images[$i] + "')");
if(($i+1)%4 == 0)
{
$($elem).css("margin-right", "0px");
}
$($box).append($elem);
}
}
$(".photos div button").on("click", function(e){
$currentId = parseInt($(this).attr("data-id"));
$url = $images[$(this).attr("data-id")];
$($popupimg).attr("src",$url);
$(".image-popup").fadeIn().addClass("open");
$("body").addClass("noscroll");
})
$(".image-popup div").after().on("click", function(){
$(".image-popup").fadeOut().removeClass("open");
$("body").removeClass("noscroll");
});
$(".image-popup .navbtn#next").on("click", function(e){
e.stopPropagation();
if($currentId >= $images.length - 1)
$currentId = 0;
else
$currentId++;
$(".image-popup img").attr("src", $images[$currentId]);
});
$(".image-popup .navbtn#prev").on("click", function(e){
e.stopPropagation();
if($currentId == 0)
$currentId = $images.length - 1;
else
$currentId--;
$(".image-popup img").attr("src", $images[$currentId]);
});
</script>
</html>
Весь код можно найти здесь: https://jsfiddle.net/maartendemoor/60wbaut1/
Заранее спасибо!