Geek asks and answers

Preloading the background image with a temporary gif image

I have a couple of sections with background images. I would like to know how I can preload these background images with a gif image, as some background images are quite large. Doing the following does not work:

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);';
    }

I think that defining another identifier for this element in the onload function and defining css for this new identifier is another possibility? Thus, changing only the identifier of this element inside the onload function?

thank

+5
source share
3 answers

-: onload div. :, , , !

-, URL- ( ): url('http://lamininbeauty.co.za/images/products/facial.jpg')

-, preloader.gif, loader.gif, css jsfiddle .

SO-server-move , , .
IE6 FF12.
: , ( ), , , ( , )!

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');  };

: 'data-bg_img' ( html5, ), , , url, :

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

"" :

<!--
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, *, .
htmlObject, htmlObjectCollection, ( ) - htmlObject (url), , htmlObjectCollection ( data-id) .
, onload: repBg exec, htmlObject () ( css). .

, : , , , , .

: http://jsfiddle.net/epdDa/

2: GRACEFUL FALLBACK!! NOBRAIN
, . , .
IE6 FF12 :
: SIMPLY div "preload" , . :

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

?
script HEAD ( ) HTML:

// 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 script)), -- ( pageload).
( ), 1. URL- style-atribute onload style .

, 1 ( ), "repBg".
: sate repBg 4 : className, Url, cssPrepend cssAppend.

( , ),
: http://jsfiddle.net/epdDa/1/

, , !

UPDATE:
.


, .

  • 1 javascript - , , xhtml html.
    , , JavaScript, ( gifs). , , , , !
  • 2 javascript - , ( -), html ( xhtml).
    , javascript . IE: javascript . " " " ". 1 2.
    :. SEMANTIC html, , id . 2 2

css? "" css ?
, , css. ( , , , ). , , , , URL- , css, css div , -, . 2 .

css HEAD - .
css..??

, / , : css . , , pageload, , . preload? : css , , ( ). .

, (true) xhtml-, document.write, , ( ). - css. (KISS-) 2.

2 , : repBg exec (= ) 'upgradeed', preload valuelist. () ( ).

2 , - , "".

, : , 2 : onload- , ( css ), : , , . . ... css: bam! , " ". . , pageload. , . -.

! (, , , / /, !)

+5

1) div load, , script. EDIT: @icktoofay, HTML onload , ().

2) script html:

<script>
    function loadImages() {
        var glykopeels = document.getElementById('glykopeels');
        var facials = document.getElementById('facials');

         glykopeels.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/glykopeel.jpg)';
         facials.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/facial.jpg)';

3) style.background , , ; , .

: http://jsfiddle.net/pjyH9/

, , , , loader.gif . . , , - - .

function loadImageToBackground(elementId, imageUri) {
    var img = new Image();
    img.onload = function() {
       document.getElementById(elementId).style.backgroundImage = "url('" + imageUri +   "')";
    };
    img.src = imageUri;   
}

, :

// past the element id and the image url to the function
loadImageToBackground('glykopeels', ​'http://image....');

, . loadImageToBackground , , .

: http://jsfiddle.net/pjyH9/19/ ( 2 1,5 , ).

+2

, JPG . - , :

<html>
  <head>
    <title>Image Load Test</title>
    <script type="text/javascript">
      function loadImage(preloader, imageDiv) {
        document.getElementById(imageDiv).style.background = '#ebebeb url('+preloader.src+') no-repeat top right';
        // I think resetting the background property also resets backgroundSize.
        // If you still want it 'contained' then you need to set the property again.
        document.getElementById(imageDiv).style.backgroundSize = 'contain';
      }
    </script>
    <style type="text/css">
      #testImage {
              background: #ebebeb url(small-image.gif) no-repeat top right;
              background-size: contain;
      }
      #preloads { display: none; }
    </style>
  </head>
  <body>
    <div id="testImage">Some Content</div>
    <div id="preloads">
      <img src="full-image.jpg" onload="loadImage(this, 'testImage')">
    </div>
  </body>
</html>

, JPG- <img>, <div> display: none, . , onLoad div s, , , . onLoad img , , , , .

EDIT: I added a line in JavaScript for the reset property background-size. If this is not what you wanted, just ignore this part.

+1
source

More articles:


All Articles