javascript - 用临时gif图像预加载背景图像

Question

我有几个带有背景图像的div。我想知道如何用gif图像预加载那些背景图像，因为某些背景图像相当大。执行以下操作无效:

HTML:

<div id="glykopeels" onload="loadImage()">Glykopeels Content</div>
<div id="facials" onload="loadImage2()">Facials Content</div>

CSS:

#glykopeels{
        background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
        background-size: contain;
    }
#facials{
    background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
    background-size: contain;
    }

JS:

function loadImage(){
        document.getElementById('glykopeels').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/glykopeel.jpg);';
    }
function loadImage2(){
        document.getElementById('facials').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/facial.jpg);';
    }

我猜在onload函数中为该元素定义一个不同的ID，并为该新ID定义CSS是另一种可能吗？因此，仅更改onload函数中该元素的ID？

谢谢

Answer 1

首先:没有div的onload属性。 编辑:请阅读下面的评论，非常有趣!

其次，您应该将网址放在引号之间(如有需要，请转义它们):url('http://lamininbeauty.co.za/images/products/facial.jpg')
第三，没有名为preloader.gif的镜像，但是有名为loader.gif的镜像，因此我在底部的jsfiddle演示链接中使用该镜像为解决方案“修复”了css部分。

在SO的服务器移动过程中，我为您编写了一个简单的自定义函数，该函数可以和完全一样。
在 IE6 和FF12中进行了测试。
要测试这一点:请清除浏览器缓冲区，否则您将无法查看它的运行速度(速度会过快)，因为图像可能会在第二个 View 上被缓冲(再次适合您的目标)!

JavaScript:

var repBg=function(a, t){ t=t||'*';  // by GitaarLAB
        var c=document.getElementsByTagName(t), i=c.length, r=[];
        while(i--){if (c[i].getAttribute(a)){r.push(c[i]);}} c=r; i=c.length;
        repBg.exec=function(){
            c[this['data-i']].style.background="#ebebeb url('"+this.src+"') no-repeat top right";
        };
        while(i--){ if (c[i].getAttribute(a)) {
            r=new Image();
            r.onload=repBg.exec;
            r['data-i']=i;
            r.src=c[i].getAttribute(a);
        }}  
};

// one could run repBg onload, but better to run it when the image has actually loaded, see html!
// window.onload=function(){  repBg('data-bg_img','div');  };

在您的BODY中:将属性“data-bg_img”(按照html5约定，以data-开头)添加到要使用此技术的元素上，并使其包含背景url，如下所示:

<div id="glykopeels" data-bg_img="http://lamininbeauty.co.za/images/products/glykopeel.jpg">Glykopeels Content</div>

body 中的“可选”初始化:

<!--
trigger the replace background function when the loader image has actually loaded!
rewriting the onload with nothing to prevent infinite loop in IE6 (and greater?) !!
-->
<img src="http://lamininbeauty.co.za/images/products/loader.gif" style="display:none;" onload="this.onload=null; repBg('data-bg_img','div');">

手册/解释:
图片确实具有onload事件，因此我们将加载图片放置在html中(位于底部)，这将触发它自己的onload事件，一旦浏览器实际下载了此加载图片，就会调用 repBg()!

函数 repBg()最多包含2个参数:

包含应选择的属性的第一个必需字符串

第二个可选参数可以定义标记名(以限制第一个参数)。

调用时，函数 repBg()将在主体中搜索符合第二个参数或 *的elementTagNames，然后使用第一个参数对其进行过滤。
对于保留在过滤后的htmlObjectCollection中的每个htmlObject，将创建一个新图像(未附加到正文中)，并将该函数的第一个参数对应的htmlObject的属性值(url)作为图像源，以及htmlObjectCollection的引用ID(属性 data-id)供引用。
一旦这些图像加载，它们就会触发其onload事件:调用 repBg的 exec方法，该方法将引用的htmlObject的背景替换为新的新加载的(大)背景图像(以及其余的CSS)。为了进一步的模块化，您可以扩展该功能。

最后， 注意:加载背景图像，以便它们在源中出现，也就是您希望事情正常的方式!

您可以在 this fiddle: http://jsfiddle.net/epdDa/中看到它的运行情况

更新版本2:GRACEFUL FALLBACK!和复制粘贴NOBRAIN解决方案
我的第一个解决方案没有提供优美的后备广告，这使我烦恼不已。因此，我提出了另一种解决方案，该解决方案可提供优美的后备。
还在 IE6 和FF12中进行了全面测试
它是这样的:
在您的BODY中:简单地将div的类设置为“preload”，并将其样式属性设置为通常应加载的backgroundimage。像这样:

<div id="facials" class="preload" style="background: #ebebeb url('http://lamininbeauty.co.za/images/products/facial.jpg') no-repeat top right;">Facials Content</div>

那很容易吧？
然后将以下脚本放入HTML的HEAD(这很重要)中:

// getElementsByClass original by dustin diaz, modified by GitaarLAB
document.getElementsByClassName=document.getElementsByClassName||function(searchClass,node,tag) {
    var classElements = [], i=0, j=0;
    if (!node){node = document;}
    if (!tag){tag = '*';}
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
    for (; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i]; j++;}
    } return classElements;
};

var repBg=(function(n,u,p,a,i,r){ // by GitaarLAB
    window.onload=function(){repBg(1);};
    i=new Image(); i.onload=function(){this.onload=null; repBg(2);};
    document.write("<style>."+n+"{background:"+p+" url("+u+") "+a+
        " !important; background-size: contain !important;}"+
        "</style>");
    i.src=u; r=0;
    return function(t){
        r=r+t; if(r>2){
            var c=document.getElementsByClassName(n), i=0, l=c.length, s;
            repBg.exec=function(){
                document.getElementById(this['data-id']).className='';
            };
            for(;i<l;i++){
                r=new Image();
                r.onload=repBg.exec;
                r['data-id']=c[i].getAttribute('id');
                s=c[i].getAttribute('style');
                try { // sane browsers
                    r.src=s.match(/url\('?([^'"]*)'?\)/i)[1];
                } catch(e) { // <IE8
                    r.src=s.cssText.match(/url\('?([^'"]*)'?\)/i)[1];
                }
            }
        }
    };
})('preload','http://lamininbeauty.co.za/images/products/loader.gif','#ebebeb','no-repeat top right');

说明:
我花了一整夜..但是我找到了办法。
如果启用了javascript，则函数repBg将从在文档头(位置，请注意将其放置在最后一个CSS脚本之后)中写入一个额外的样式块开始，该样式块将为所有元素设置loader-background-image类“preload”(因此在页面加载时显示加载图像)。
如果加载了用于加载图像的加载测试图像，并且加载了窗口(以获取主体中的所有元素)，则其与版本1基本相同。仅这次，我们从以下位置获取并匹配网址元素的style-attribute和onload随后会清空元素的style-attribute。

由于此函数会自动执行并使用类似于版本1(如上所述)的版本覆盖自身，因此您只需在函数“repBg”的最后一行调整参数即可。
请注意:在初始状态 repBg最多接受4个参数:className，Url，cssPrepend和cssAppend。

要查看实际效果(请不要忘记按照说明清理浏览器缓冲区)，
点击 this fiddle: http://jsfiddle.net/epdDa/1/

凡使用此功能的人，如果您相信我，我将不胜感激!

更新:
额外的解释和评论的答案。

2个版本之间的主要区别
从技术上讲，两个版本都使用几乎相同的技术，因此两者之间没有真正的区别。

在版本1中，javascript是使页面正常工作所必需的粘合剂，但可以在有效的true xhtml和纯html中工作。
但是，关闭javascript的人将获得一个无法正常运行的网站(仅显示loading-gifs)。请注意，所有其他当前答案(包括您的前进方向)都会遇到此问题!

使用版本2时，javascript只是增强页面交互(应该编码网站的方式)的香料，但是只能在html(或无效的xhtml)中使用。
但是，这应确保关闭javascript的人仍能看到正常运行的页面。 IE:不需要javascript即可正确显示网站。这个概念称为“优美的后备”或“优美地降级”。我对版本2的投票为1。
额外的好处:，因为您使用的是古老可靠的内联样式，ID和类，所以此路径为您提供普通的 Vanilla 验证和SEMANTIC html。我对版本2的投票2

为什么选择使用嵌入式CSS？为什么“必须”使用嵌入式CSS才能正常工作？
首先，我花了几个小时来避免在线CSS。 (我没有松开它们，我了解到行不通的方法，同样有用)。接下来，我想指出的是，所有当前答案(包括前进的方向)都与css分开了实际的背景图片网址，而在css中，您分别在每个div上设置了加载器图片，这在某个类中更有意义。版本2仅使用可配置的类名。

文档的HEAD中的 reading和 writing css块都有些困惑。
我还提到链接的外部CSS文件吗？

我认为，所有这些都需要大量额外的代码和cpu周期，并在每个页面加载时阻止/停止浏览器，以使核心原理正常工作:最后一个有效的css-rule适用。由于加载的图像是页面加载时指定的背景图像，因此正好尽快显示加载的图像，正是这种功能所需要的。如果该元素不再是'preload'类的一部分？正确:内联css生效，并以browsr可以渲染的速度更新(如果图像已经加载)。真好

因此，如果仅通过使用 document.write牺牲了(true)xhtml-support，则目前仍然证明这种方式是“最好的”方法(如您在前2个链接中所读)。并且它仍然可以与外部链接的CSS一起使用。我对版本2的第三次(KISS-)投票。

我对版本2的第四次投票是因为: repBg函数准备对其 exec方法(= function)进行“升级”，因此您只能从类的值列表中取出“preload”值。一个简单的replace()就足够了(目前不考虑速度)。

我对版本2的第五次也是最后一次投票是，由于它具有优美的后备设置，因此修复或阻止某些浏览器使用额外的“香料”相对容易。

最后，关于速度:我认为版本2总是会感觉更简单:onload-image的显示速度几乎与浏览器可以获取它的速度一样(好像总是有这个额外的CSS一样)，因此加载动画会自:它们的加载已经在头部开始，并且浏览器将不会下载覆盖的图像，直到该函数调用为止。另外，它们看起来很互动，没有干扰。但是..当实际的背景图像被加载并且css更新时:bam!图像在那里，没有从上到下扫描的“效果”。这种效果让人感觉非常快。实际上，我深信并且将对galary中的图像进行调整，以适应快照的感觉并增加初始页面加载量。.注意，这是我的观点。你的里程可能会有所不同哈哈。

祝好运!!
(如果您喜欢/使用此想法/功能，请投票，谢谢!!!)