Question

请建议我如何在中间按钮点击功能显示背景图像完全加载时间。

由于

<html >
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
    $('button').click(function() {
    //want a loader till the background images loads
        $('#load').show();
        $('#mybody').css('background-image', 'url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg)');
        //hide loader after the background images loads
                $('#load').hide();
    });
});
</script>
</head>
<body id="mybody" >

<button >Hello</button>
<div style="display:none" id='load'>loading......</div>
</body>
</html>

Answer 1

如果要在窗口完全加载之前显示#load div，则可以使用以下代码。你也把jQuery库文件放错了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{background-image: url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg);}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(window).load(function() {
    $('#load').hide();
});
</script>
</head>

<body>

<div id='load'>loading......</div>

</body>
</html>

使用Jquery的反对css背景图象的装载者

1 个答案: