I want to load the background first using jquery but my code doesn't seem to work
Question
Below is the code. but i don't know what the problem is. I have a array of background images after each load it keeps changing[This is my intention]. Now i planned to use javascript to load the background first but my code doesn't work though it works with regular style tags. I don't know what am doing wrong here. below are the code.
This below code works but takes time to load the image
<?php
$bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>
<style>
body{
background-image:url("<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>");
}
</style>
This code doesn't work. I'm doing this because i want to load the BG first.
<?php
$bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<script>
var img1 = new Image();
img1.src="<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>";
$('body').css('background-image', 'url('+ img1.src + ')');
</script>
3 answers
solution1
2 ACCPTED 2016-09-22 05:52:26
Is your path correct?
In my example, this would be this:
http://localhost/test/assets/images/login_bg.jpg
called from this file:
http://localhost/test/index.php
Edit & Accepted answer:
Your JS/jQuery is faster than your site. Try to use $( document ).ready(function() {
$( document ).ready(function() {
$('body').css('background-image', 'url('+ img1.src + ')');
});
Why?
Because your site will be rendered from top to bottom. If you have JS/jQuery that will add something to your HTML, but the HTML is not rendered yet, it won't add something because jQuery will not find the item that you want to manipulate.
That's why you should include a JS-file at the bottom of your HTML-file.
But if you added it directly to your <head> , you have to it with $( document ).ready(function() { to be sure that your JS/jQuery will work.
Possible alternative is the standard JS onload function:
window.onload = function() {};
solution2
1 2016-09-22 06:04:34
You should modify like this:
PHP: It should be like $selectedBg = $bg[$i]; instead of "$bg[$i];"
<?php
$bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>
HTML:
You need to add body tag also to get it working.
<body>
<script src="jquery.min.js"></script>
<script>
var img1 = new Image();
img1.src="<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>";
$('body').css('background-image', 'url('+ img1.src + ')');
</script>
</body>
Another thing: Make sure $base_url; is declared.
solution3
0 2016-09-22 05:56:29
You can simply use like below.
<script>
$('body').css('background-image', 'url(<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>)');
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.