是否有可能,不确定这是否是正确的术语,但预加载它以便在加载时它是设置的高度和宽度。我希望它是 100vh 和 100vw。
附带说明一下,我的 jquery 幻灯片放映有什么问题,我不擅长 jquery 和 javascript,并尝试使用 setInterval 进行幻灯片放映。
fiddle :https://jsfiddle.net/jzhang172/ymfdn6hu/1/
$(document).ready(function() {
setInterval(function () {
$('.featured-wrapper').addClass("slide-1").find('.city-sky').text(" City Sky");
$('.featured-wrapper').addClass("slide-1").find('h3').text(" Interior Design |");
$('.featured-wrapper').addClass("slide-1").find('.city-title').text("| Berlin");
$('.featured-wrapper').removeClass("slide-2");
$('.featured-wrapper').removeClass("slide-3");
}, 4000);
setInterval(function () {
$('.featured-wrapper').addClass("slide-2").find('h3').text("changing");
$('.featured-wrapper').removeClass("slide-1");
$('.featured-wrapper').removeClass("slide-3");
}, 8000);
setInterval(function () {
$('.featured-wrapper').addClass("slide-3").find('h3').text("changed");
$('.featured-wrapper').removeClass("slide-1");
$('.featured-wrapper').removeClass("slide-2");
}, 12000);
});
.section-background-size{
background-repeat:no-repeat;
background-size:cover !important;
height:100vh;
width:100vw;
transition:1s;
}
.section-one{
background:$slide-2;
height:100%;
width: 33.333%;
background-size:cover;
background-repeat:no-repeat;
}
.featured-work{
height:100vh;
width:100vw;
position:relative;
}
.featured-wrapper{
background:url('http://coolvibe.com/wp-content/uploads/2010/07/vader-portrait1-992x558.jpg');
@extend .section-background-size;
}
.slide-1{
background:url('http://coolvibe.com/wp-content/uploads/2010/07/vader-portrait1-992x558.jpg') no-repeat;
@extend .section-background-size;
}
.slide-2{
background:url('http://i.imgur.com/o7ofCFF.jpg') no-repeat;
content:("test");
@extend .section-background-size;
}
.slide-3{
background:url('http://coolvibe.com/wp-content/uploads/2010/07/star-wars-wallpapers1-992x558.jpg') no-repeat;
@extend .section-background-size;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featured-work">
<div class="featured-wrapper">
<div class="article-title">
<h2>PROJECTS</h2>
<h3>Interior Design | </h3><span class="city-sky"> City Sky</span> <h3 class="city-title">| Berlin </h3>
</div>
<div class="view-projects">View Projects</div>
<div class="language-change">
<div class="lang english">English</div>
<div class="lang">Chinese</div>
</div>
</div>
</div>
最佳答案
可能还有其他方法可以做到这一点,但您可以尝试使用 jQuery 加载图像,并使用 load()
方法的回调让您知道它何时加载并淡入(或显示整个页面...)
类似于:
$('#bigImg').load('file_with_img.html', function(){
$('#overlay').fadeOut();
});
#overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#333;z-index:1;}
#loadr{position:absolute;top:45%;left:45%;z-index:2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="overlay"><img id="loadr" src="http://placeimg.com/100/100/aniamsl" /></div>
<div id="container">
<div>This is the image we are waiting for:</div>
<div id="bigImg"></div>
</div>
引用:
关于javascript - 预加载图像以使其在加载过程中不调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36322566/