Question

我的jquery / js代码没有等待加载淡出的图像。有什么问题？

＆＃13;

$('#entry').css('background-image','url(../img/backg3.jpg)').waitForImages(function() {
    $('#load').fadeOut(1000);
	$('.spinner').fadeOut(1000);
});

＆＃13;

	/*******************

Loading

*********************/

	#load {
		position:absolute;
		height:100vh;
		width:100vw;	
		background-color:#ddd;
		z-index:1000;
		/*-moz-transition:all 2s ease-out;
		-webkit-transition:all 2s ease-out;
		-webkit-transition:all 2s ease-out;
		transition:all 2s ease-out;*/
	}
	
	@-o-keyframes spin {
			100%{
				-o-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}

	@-moz-keyframes spin {
			100%{
				-moz-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}

	@-webkit-keyframes spin {
			100%{
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}

	@keyframes spin {
			100%{
				transform: rotate(360deg);
			}
		}

	.spinner {
		position:absolute;
		top:45vh;
		left:45vw;
		width:5vh;
		height:5vh;
		border: 6px solid #F90;
		border-left-color:#FC3;
		border-bottom-color:#FF6;
		border-right-color:transparent;
		border-radius:100%;
		animation: spin 400ms infinite linear;
		margin: auto;
		}

＆＃13;

<div id="load">
		<div class="spinner"></div>	
</div>

＆＃13;

所以我希望在我的背景图片加载时保持微调器，但它会在没有图像的情况下淡出。

页面 - http://sarosacramento.com/ 插件 - https://github.com/alexanderdickson/waitForImages

Answer 1

在他们的github页面中，您似乎应该将.waitForImages()应用于元素选择器（其CSS中包含图像子图像或图像）。在您的代码中，您不是将其应用于选择器，而是首先添加CSS，然后尝试应用.waitForImage()，这不会起作用，因为.css（）不会返回一个选择器。请尝试改为：

$('#entry').waitForImages(function () {
    $('#load').fadeOut(1000);
    $('.spinner').fadeOut(1000);
});

用于JS并将背景图像放在普通的CSS中：

#entry {
  background-image: url(../img/backg3.jpg);
}

（如果你必须通过JS设置它，在将.waitForImages（）应用到$（＆＃34; entry＆＃34;）之前执行此操作：

$('#entry').css('background-image','url(../img/backg3.jpg)');
$('#entry').waitForImages(function () { ...

虽然我还没有真正测试过这个。）

以下是一个例子：http://jsfiddle.net/aq9t6kvk/2/。（它主要使用你的代码，但是我使用了一些不会出现在我们的缓存中的不同图像。但是由于第一个可能已经加载而JSFiddle是＆＃34;初始化真棒＆＃34;后续＆＃34; Run＆＃34;的一些备份。）

waitForImages插件 - 不等待

1 个答案: