javascript - 预加载图像以使其在加载过程中不调整大小？

Question

是否有可能，不确定这是否是正确的术语，但预加载它以便在加载时它是设置的高度和宽度。我希望它是 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>

Answer 1

可能还有其他方法可以做到这一点，但您可以尝试使用 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>

---

引用:

http://api.jquery.com/load/