All geek questions in one place

Download background image only after full download?

Well, the title pretty much describes my question:

How to load a background image dynamically after it is fully loaded? Sometimes I have to use backgrounds that are so large that the browser may take some time to load it. I would prefer to “download it in the background” and let it disappear when it is fully loaded.

I think jQuery is best used, but I also need my background if JavaScript is disabled. If this is really impossible, so be it, but I think it is?

Regards, Aart

........

EDIT:

Thanks guys! I have been looking for this for a long time and simply could not come up with a good and easy way.

I converted Jeffrey's Javascript solution to jQuery, just because jQuery's built-in fading looks so awesome.

I will just post it here if someone else has the same problem:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function() { $('#img').css('opacity','0').load(function() { $(this).animate({ opacity: 1 }, 500); }); }); </script> <img src='yourimage.jpg' id='img'/>
+7
source share
6 answers

If the image is included with the img element:

 <img src="bg.jpg" id="img" onload="this.style.opacity='1'"> <script> document.getElementById("img").style.opacity="0"; </script>

This should load the image normally if JavaScript is disabled, but only display it after loading, provided that it is enabled.

One thing worth noting (which I missed) is that some browsers will not even try to load the image if its display property is none . This is why this method uses the opacity attribute.

+7
source

You cannot do this when JS is disabled. However, you can set the background image in CSS and then use the following script (assuming the element has the identifier myelem ).

 (function() { var elm = document.getElementById('myelem'), url = 'background image URL here'; elm.style.backgroundImage = "none"; var tmp = new Image(); tmp.onload = function() { elm.style.backgroundImage = "url('"+url+"')"; // or insert some other special effect code here. }; tmp.src = url; })();

EDIT: Although, make sure the background images are optimal. If they are PNG, try indexing them with the largest possible color table or make sure that the alpha channel is deleted if there is no transparency. If they are JPEG, try adjusting the compression.

+3
source

See an example on this page: http://www.w3schools.com/jsref/event_img_onload.asp

Using "image.onload" will only run your code when the image is ready.

+1
source

Without javascript, you cannot have events, so you won’t be able to find out if the image is loaded, at least for the first rendering.

You can also use css preload (put the image as a background in a hidden div), but this will work better on the first update, rather than during loading.

+1
source

You can set a variable on the image, and when it loads, set it to the background:

 var my_bg = new Image(); my_bg.src = "url(mybackground.png)"; document.style.backgroundImage = my_bg;
+1
source

What you are looking for is the onLoad image method. If you install an image with a display: none of them will be visible. To get around the possible lack of javascript, you do the following:

 <body style="background-image:url(image.png);"> <img src="image.png" style="display:none" onLoad="changeBackground();" /> </body> <script> document.body.style.backgroundImage = ""; function changeBackground(){ document.body.style.backgroundImage = "url(image.png)"; } </script>

Thus, if javascript is not enabled, bg will load as usual. If so, the end will display

+1
source

Source: https://habr.com/ru/post/912405/

More articles:


All Articles