在WordPress
页面中,我添加了一个简短的脚本,以便在用户点击该页面的某些链接时显示加载图标。
以下实施无处不在,Apple设备(Safari中)除外。 任何提示,我该如何解决这个问题?
$('.load-icon .zoom_box a').on('click', function() {
$('.my-hide').css("display", "block");
});
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.02);
}
.loading-wheel {
width: 20px;
height: 20px;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
left: 50%;
border-width: 30px;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
}
.style-2 .loading-wheel {
border-style: double;
border-color: #74AFAD transparent;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.my-hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="load-icon">
<div class="zoom_box">
<a href="#">link</a>
</div>
</div>
<div class="loading style-2 my-hide">
<div class="loading-wheel"></div>
</div>