我正在使用 CSS hover effect我在网络投资组合的 Codrops 上找到的 work page .在移动分辨率下，元素的动画通过单击超链接图像激活，但在加载下一页之前转换并不总是有时间完成。
有没有办法利用 JavaScript/jQuery 在移动分辨率下延迟页面/网站的加载？
更新:
我将下面 Yaseen Ahmed 的解决方案与基于 jQuery 的 StackOverflow solution 相结合我终于找到了解决我的问题的完美方法。
$(document).ready(function() {
$('.delay').click(function(e) {
if (window.innerWidth < 768) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 2500);
} else {
window.location.assign($a.attr('href'));
}
});
});section {
width: 600px;
height: 400px;
}
figure {
cursor: pointer;
}
figure.apollo {
position: relative;
float: left;
overflow: hidden;
width: 100%;
background: #c3589e;
}
figure.apollo img {
position: relative;
display: block;
height: auto;
width: 100%;
opacity: 0.8;
}
figure.apollo figcaption {
padding: 2rem;
backface-visibility: hidden;
}
figure.apollo figcaption::before,
figure.apollo figcaption::after {
pointer-events: none;
}
figure.apollo figcaption,
figure.apollo figcaption>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
}
figure.apollo figcaption>a {
z-index: 5;
white-space: nowrap;
span {
opacity: 0;
}
}
figure.apollo img {
opacity: 0.95;
transition: opacity 0.35s, transform 0.35s;
transform: scale3d(1.1, 1.1, 1);
}
figure.apollo figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: transform 0.6s;
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
}
figure.apollo figcaption p span {
margin: .25rem 0;
padding: 0 .5rem;
display: inline-block;
background-color: #ffffff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
figure.apollo:hover img {
opacity: 0.6;
transform: scale3d(1, 1, 1);
}
figure.apollo:hover figcaption::before {
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<p>Make sure you shrink your viewport width to less than 768px before testing the link delay.</p>
<figure class="apollo">
<img src="https://www.tylerfuller.me/assets/images/sakura.jpg" alt="Cherry Blossoms" />
<figcaption>
<p><span>This is a link to the</span><br />
<span>pure CSS Sakura</span><br />
<span>theme / framework.</span></p>
<a class="delay" href="https://oxal.org/projects/sakura/"></a>
</figcaption>
</figure>
</section>
</body>最佳答案
您需要在元素中创建 java 脚本函数，请参阅代码。
您的超链接
<a href="javascript:void(0)" onclick="loadpage()"></a>
java脚本函数
function loadpage() {
if (window.innerWidth < 768) {
setTimeout(function(){
location.href="your_url";
}, 1000);
} else {
location.href="your_url";
}
}
当你的屏幕宽度小于 768 时，这个函数会做什么，它会在一秒后加载 url，如果更慢，它会立即加载 url。
注意:当您调整屏幕宽度时必须重新加载页面。
关于JavaScript/jQuery - 在移动分辨率下单击超链接时延迟加载页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44857163/