那里的主要解决方案是：
“Just throw a loading screen up until the page is loaded”.
但我的目标是构建能够非常快速地显示基础知识的页面,而无需加载屏幕,然后在图像和花哨功能准备好后进行转换.所以我会等到它被加载,然后淡入它.或者我将加载一个非常低分辨率的版本,然后在它准备好时淡入高分辨率.
我还没想到的这种做法的一个方面是如何用背景图像来做.
如何通过背景图像实现平滑淡入的效果？
我愿意用：
> Javascript
> JQuery
>任何现代的JQuery库
> CSS技巧/“黑客”
但我想避免：
>使用覆盖元素并将其淡入顶部.
解决方法
我想我有一个解决方案！ (对不起,刚刚离开我得到了这个工作:)
//library (minified)
this.BgImgFader=function(){var styleRules;function getArray(str){if(str.indexOf(',')==0){str.substring(1);}if(str.lastIndexOf(',')==str.length-1){str.substring(0,str.length-1);}if(str.indexOf(',')==-1){var selectors=[str];}else{var selectors=str.split(',');}for(var i=0;i<selectors.length;i++){selectors[i]=selectors[i].trim();}return selectors;}function getStyleSheet(style){if(typeof style==='number'){return document.styleSheets[style];}else{for(var i=0;i<document.styleSheets.length;i++){var file=document.styleSheets[i].href;file=file.substring(file.lastIndexOf('/')+1);if(file.toLowerCase()==style.toLowerCase()){return document.styleSheets[i];}}}}function addStyleRule(sheet,selector,declarations){if(sheet.addRule){sheet.addRule(selector,declarations);}else{sheet.insertRule(selector+'{'+declarations+'}');}}this.prepare=function(style,selectors){var selectors=getArray(selectors);var styleSheet=getStyleSheet(style);for(var i=0;i<selectors.length;i++){addStyleRule(styleSheet,selectors[i],'position:relative;');addStyleRule(styleSheet,selectors[i]+'::after','position:absolute;top:0;right:0;bottom:0;left:0;opacity:0.0;content:"";');}};this.fade=function(style,selectors,global,opacity,endOpacity,delta){var selectors=getArray(selectors);var styleSheet=getStyleSheet(style);styleRules=styleSheet.rules?styleSheet.rules:styleSheet.cssRules;fadeOpacity(selectors,delta,[]);};function fadeOpacity(selectors,rules){opacity+=delta;if(rules.length==0){for(var i=0;i<selectors.length;i++){for(var j=0;j<styleRules.length;j++){if(global&&styleRules[j].selectorText.toLowerCase().indexOf(selectors[i].toLowerCase()+'::after')!=-1){rules.push(styleRules[j]);}else if(styleRules[j].selectorText.toLowerCase()==selectors[i].toLowerCase()+'::after'){rules.push(styleRules[j]);break;}}}}for(var i=0;i<rules.length;i++){rules[i].style.opacity=opacity;}if(opacity<endOpacity){setTimeout(function(){fadeOpacity(selectors,rules);},0);}else{for(var i=0;i<rules.length;i++){rules[i].style.opacity=endOpacity;}rules.length=0;}}};
//instantiate BgImgFader in global domain
var BgImgFader = new BgImgFader();
window.onload = function(){
//prepare specified elements
BgImgFader.prepare(0,'.exampleClass'); //style,selectors
//fade specified elements
BgImgFader.fade(0,'.exampleClass',true,0.5,0.002); //style,startOpacity,delta
};
#exampleId {
width: 300px;
height: 200px;
margin: 10px 0px 0px 10px;
background-color: #AAAAAA;
}
#exampleId .exampleClass {
width: 200px;
height: 130px;
padding: 5px;
}
#exampleId .exampleClass::after {background:url(https://placeimg.com/640/480/any) center/cover no-repeat;}
<div id="exampleId">
Some other text to illustrate how this can be implemented.
<div class="exampleClass">
I assume you want transparent background images because you have text in the element that you do want to show from the start?
</div>
</div>
codepen：https://codepen.io/anon/pen/QMLPbr
我基本上最终建立了一个小型图书馆.纯JavaScript,不需要jQuery.
你要做的就是在JS中添加这三个BgImgFader行：
//instantiate BgImgFader in global domain
var BgImgFader = new BgImgFader();
window.onload = function(){
//prepare specified elements
BgImgFader.prepare(0,'.exampleClass'); //stylesheet,0.002); //stylesheet,delta
};
并将以下内容添加到CSS中的所有background-image-elements：
#example {...}
#example::after {background:url(path/to/image.png) center/cover no-repeat;}
因此,对于具有背景图像的每个元素,您必须在{rule并将背景图像放在那里之后添加#example ::. (您不必在HTML中执行此操作,仅在CSS中执行此操作.)
我已经将库的源代码添加为下面的代码片段.评论在代码中.
您可以将代码粘贴到自己脚本的顶部,也可以将代码放在文件和HTML中,链接到该文件,就像您对任何其他库一样(在您自己的代码之前)：
<script type="text/javascript" src="path/to/bgimgfader.js"></script>
/**
* BgImgFader - Library:
* This library makes it possible to fade the background-image of an element.
* The image can be faded in or out.
*
* Compatibility:
* - IE9 and higher should be fine,lower could give trouble.
* - Older versions of FF/Chrome will probably give some problems too,but I think we can safely assume
* that those who chose either one of these browsers,did so because they choose NOT to live in the past..
* - Opera and others... I have absolutely no idea.
*
* #################################################################################
* INSTRUCTIONS---------------------------------------------------------------------
* 1. In CSS:
* a. For every element with a background-image,create an '::after' rule,and put the image in there:
* (You don't have to create these '::after'-elements in the HTML)
*
* #element {...}
* #element::after {background:url(path/to/image.png) center/cover no-repeat;}
*
* The following declarations will be added by the BgImgFader,keep that in mind:
* #element {position:relative;}
* #element::after {position:absolute; top:0;right:0;bottom:0;left:0; opacity:0.0; content:"";}
*
* (The important one is 'position:relative;',the ones on the '::after'-element have no consequences)
*
* ---------------------------------------------------------------------------------
* 2. In JavaScript:
* a. Instantiate the BgImgFader in the global domain: var BgImgFader = new BgImgFader();
*
*
* b. Prepare the elements with a background-image: BgImgFader.prepare(0,'elements'); //style,selectors
*
* - style: Reference to the style sheet with the rules for the specified elements.
* This can be either an INTEGER for internal style sheets (0),* or a STRING of a filename for external style sheets ('style.css').
* - selectors: STRING reference to the selectors in the style rules.
* This works the same as in the CSS,below a few examples.
* Individual tags: ('div') ('#id') ('.class')
* Multiple tags: ('div.class') ('#id .class') ('.class.subclass')
* Multiple selectors: ('div,#id,div.class,#id .class,.class.subclass')
*
*
* c. Initiate the fade: BgImgFader.fade('style.css','elements',0.005); //style,delta
*
* - style: See 2b for the details.
* - selectors: See 2b for the details.
* - global: BOOLEAN that deternimes whether only complete matches for the selectors are allowed,* or partial matches as well,increasing the range of the BgImgFader.
* TRUE allowes partial matches: Feed the BgImgFader '.class' and it will also try to fade 'div .class'.
* FALSE allowes only complete matches.
* - startOpacity: FLOAT that indicates the start opacity (0.0 - 1.0).
* - endOpacity: FLOAT that indicates the end opacity (0.0 - 1.0).
* - delta: FLOAT that indicates the delta of every fade-iteration (1.0 - 0.00000000...1).
* The effective range is approximately (0.1 - 0.0001).
* A smaller delta means a slower fade.
* A positive delta in combination with start<end fades the image in.
* A negative delta in combination with start>end fades the image out.
*
* #################################################################################
*/
this.BgImgFader = function() {
var styleRules;
//GET/SET-FUNCTIONS=================================================================
//GET SELECTORS---------------------------------------------------------------------
function getArray(str) {
/* This function is invoked by this.prepare() and this.fade().
* This function converts the specified string of selectors to an array,and returns that.
*/
//strip trailing comma's
if (str.indexOf(',')==0) {str.substring(1);} //strip first comma
if (str.lastIndexOf(',')==str.length-1) {str.substring(0,str.length-1);} //strip last comma
//store selectors in array
if (str.indexOf(',')==-1) {var selectors = [str];}
else {var selectors = str.split(',');}
//trim trailing spaces
for (var i=0; i<selectors.length; i++) {
selectors[i] = selectors[i].trim();
}
return selectors;
}
//GET STYLE SHEET-------------------------------------------------------------------
function getStyleSheet(style) {
/* This function is invoked by this.prepare() and this.fade().
* This function returns a reference to the specified style sheet,* based on either a number or a filename of the sheet.
* A number is for internal sheets,where the number stands
* for its location in the HTML (e.g. the first '<style></style>').
* A filename is for external sheets (e.g. 'style.css').
* See the instructions in the header of this file for details.
*/
if (typeof style === 'number') {
return document.styleSheets[style];
} else {
//find style sheet
for (var i=0; i<document.styleSheets.length; i++) {
var file = document.styleSheets[i].href;
file = file.substring(file.lastIndexOf('/')+1);
if (file.toLowerCase() == style.toLowerCase()) {
return document.styleSheets[i];
}
}
}
}
//SET STYLE RULE--------------------------------------------------------------------
function addStyleRule(sheet,declarations) {
/* This function is invoked by this.prepare().
* This function dynamically adds the specified rule to the specified style sheet.
*/
if (sheet.addRule) {sheet.addRule(selector,declarations);} //IE...
else {sheet.insertRule(selector+'{'+declarations+'}');} //NON-IE...
}
//PREPARE===========================================================================
this.prepare = function(style,selectors) {
/* This function is invoked by an external function,outside of the library.
* This function is an interface for external scripts to access this library.
* The function prepares the elements specified by the selectors,by adding certain style rules
* to them that are necessary for this library to successfully manipulate the background-image.
*/
var selectors = getArray(selectors);
var styleSheet = getStyleSheet(style);
for (var i=0; i<selectors.length; i++) {
addStyleRule(styleSheet,'position:relative;');
addStyleRule(styleSheet,'position:absolute; top:0;right:0;bottom:0;left:0; opacity:0.0; content:"";');
}
};
//FADE BACKGROUND IMAGE=============================================================
//INIT------------------------------------------------------------------------------
this.fade = function(style,delta) {
/* This function is invoked by an external function,outside of the library.
* This function is an interface for external scripts to access this library.
* The function initiates the fading process. It first stores the appropriate
* set of style rules into the style rules variable,and then invokes
* fadeOpacity() to start the fading.
*/
var selectors = getArray(selectors);
var styleSheet = getStyleSheet(style);
styleRules = styleSheet.rules ? styleSheet.rules : styleSheet.cssRules; //IE uses 'rules',NON-IE use 'cssRules'
fadeOpacity(selectors,[]);
};
//FADE------------------------------------------------------------------------------
function fadeOpacity(selectors,rules) {
/* This function is invoked by fade().
* This function fades the background-image of the specified elements,by
* adding the delta to the current opacity,and then setting the opacity
* of all specified elements to that new value.
*/
opacity += delta;
if (rules.length == 0) {
//find the css-rules that match the specified selector(s)
for (var i=0; i<selectors.length; i++) {
for (var j=0; j<styleRules.length; j++) {
if (global && styleRules[j].selectorText.toLowerCase().indexOf(selectors[i].toLowerCase()+'::after')!=-1) {
rules.push(styleRules[j]);
} else if (styleRules[j].selectorText.toLowerCase() == selectors[i].toLowerCase()+'::after') {
rules.push(styleRules[j]); break;
}
}
}
}
//set the opacity of the background-image for every matched rule
for (var i=0; i<rules.length; i++) {
rules[i].style.opacity = opacity;
}
//check if the end-opacity is reached
if (opacity < endOpacity) {
setTimeout(function(){fadeOpacity(selectors,0); //invoke itself again
} else {
//manually set the opacity to the end-opacity (otherwise it'll be off by a fraction)
for (var i=0; i<rules.length; i++) {
rules[i].style.opacity = endOpacity;
}
rules.length = 0;
}
}
};
source code of library,not a working code snippet!
有趣的事实：这在jsfiddle.net上不起作用,因为它们自己的样式表与小提琴中的样式表混合在一起,使得无法确定所需的CSS规则所在的表(基于数字).
