jquery setting background image on load not working

Question

currently im having a decent bit of trouble getting my jquery code to work. I'm trying to make the div load in with the correct background image but it doesnt wanna do so. I cant find out what might be wrong since im pretty new to jquery. I have a container set which needs a background image within the html attr 'srcpost' which contains something like

url("movies/Napoleon Dynamite/poster.jpg")

Ill post what I have so far, nothing happens on load. just a blank div with no background image :(.

$( '.video_selection' ).on( 'load', function() {
	var backgroundimg = $( this ).attr('srcpost');
	$( this ).css('background-image', backgroundimg);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

div does not raise load-event, hence your callback-function will never be called, maybe you want to do that when the dom is ready instead? — Esko
– Esko, Commented Mar 20, 2019 at 7:56
like @Esko said, it should be $(document).ready(function(){}) instead $( '.video_selection' ).on( 'load', function() { — Roy Bogado
– Roy Bogado, Commented Mar 20, 2019 at 7:57

Mukyuu · Accepted Answer · 2019-03-20 08:02:50Z

Please don't use element .onload method: Jquery on() load event on a single element. Might as well use $(document).ready(). Which would render your $(this) targeting window and you must change to element class. Also take care of \ in vidurl.

/*$(window).on( 'load', function() {
	var backgroundimg = $('.video_selection').attr('srcpost');
  console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
	$('.video_selection').css({'background-image': backgroundimg});
}); // window load will wait for all the content (images etc) to load before starting.  */

$(document).ready(function(){
	var backgroundimg = $('.video_selection').attr('srcpost');
  console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
	$('.video_selection').css({'background-image': backgroundimg});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

Also if you want to define multiple css value you can add them in {}:

$(document).ready(function(){
	var backgroundimg = $('.video_selection').attr('srcpost');
	$('.video_selection').css({'background-image': backgroundimg, 'height': '500px'});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")'>
  <p>Napoleon Dynamite</p>
</div>

Krishnadas PC · Accepted Answer · 2019-03-20 08:01:10Z

1

$(function(){
	var backgroundimg = $('.video_selection').attr('srcpost');
	$( '.video_selection' ).css('background-image', backgroundimg);
})

.video_selection {
  width: 500px;
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

answered Mar 20, 2019 at 8:01

Krishnadas PC

6,5992 gold badges60 silver badges58 bronze badges

Comments

Hien Nguyen · Accepted Answer · 2019-03-20 08:12:19Z

0

You can do like this for trigger load event for div.

$(function(){
        $('div[onload]').trigger('onload');
    });

function changebackground(div) {
	var backgroundimg = $('.video_selection').attr('srcpost');
  //alert(backgroundimg)
	$('.video_selection').css('background-image', backgroundimg);
}

$(function(){
	$('div[onload]').trigger('onload');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' onload="changebackground(this)" vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

answered Mar 20, 2019 at 8:12

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

jquery setting background image on load not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related