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, Mar 20 '19 at 07:56
like @Esko said, it should be `$(document).ready(function(){})` instead `$( '.video_selection' ).on( 'load', function() {` — Roy Bogado, Mar 20 '19 at 07:57

Mukyuu · Accepted Answer · 2019-03-20T08:02:50.593

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>

score 1 · Answer 2 · answered Mar 20 '19 at 08:01

$(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>

score 0 · Answer 3 · answered Mar 20 '19 at 08:12

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>

jquery setting background image on load not working

3 Answers3