Only load the background-image when it has been fu

2019-06-18 05:03发布

站内问答 / JavaScript
434 6 6

Well, the title pretty much describes my question:

How to load the background-image dynamically after it has been fully loaded? Sometimes, I must use backgrounds that are so big that it can take a while for the browser to download it. I'd rather 'load it in the background' and let it fade in when it has been fully loaded.

I think jQuery would be best to be using, but I also want my background to appear if JavaScript has been disabled. If this really isn't possible, so be it, but I think it is?

Best regards, Aart

........

EDIT:

Thanks a bunch, guys! I've been bugged with this for ages and just couldn't think of a nice and easy way.

I converted Jeffrey's Javascript-solution into a jQuery one, just because jQuery's built-in fade looks so awesome.

I'll just post it here in case anyone else has the same issue:

<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'/>

6条回答
对你真心纯属浪费
2楼-- · 2019-06-18 05:45

Check the example on this page: http://www.w3schools.com/jsref/event_img_onload.asp

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

查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-06-18 05:50

If the image is included with an img element:

<img src="bg.jpg" id="img" onload="this.style.opacity='1'">

<script>
    document.getElementById("img").style.opacity="0";
</script>

That should load the image normally if JavaScript is disabled, but show it only once it loads assuming it's enabled.

One thing to note (that I overlooked): some browsers will not even attempt to load an image if its display property is none. That's why this method uses the opacity attribute.

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
4楼-- · 2019-06-18 05:50

What you are looking for is an image onLoad method. If you set the image with a display:none it wont 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>

This way, if javascript isnt enabled, the bg will load as normal. If it is, it will display at the end

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
5楼-- · 2019-06-18 05:55

You can't do it when JS is disabled. However, what you can do is set the background image in CSS and then use the following script (assuming the element has the ID 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 your background images are optimal. If they are PNG, try having them Indexed with as small a colour table as possible, or make sure the alpha channel is removed if there is no transparency. If they are JPEG, try adjusting the compression.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
6楼-- · 2019-06-18 06:05

Without javascript you can't have events, so you won't be able to know if the image is loaded, at least for the first rendering.

You can also use a css preload (put the image as a background in a hidden div), but that would work better in your first refresh and not while loading.

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
7楼-- · 2019-06-18 06:06

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

var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)