Question

目前我在让我的jquery代码正常工作方面遇到了麻烦。我正在尝试使用正确的背景图像使div加载，但它不想这样做。我无法找出什么可能出问题了，因为我对jQuery来说还很陌生。我有一个容器集，它需要html attr'srcpost'中的背景图像，其中包含

之类的内容

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

我将发布到目前为止的内容，在加载时什么也不会发生。只是一个没有背景图片的空白div：（。

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

Answer 1

请不要使用元素.onload方法：Jquery on() load event on a single element。最好使用$(document).ready()。这将显示您的$(this)定位窗口，您必须更改为元素类。还要注意\中的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>

如果您要定义多个CSS值，也可以将它们添加到{}中：

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

Answer 2

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

Answer 3

对于div的触发加载事件，您可以这样做。

Put Block List

$(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');
});

jQuery在加载时设置背景图像不起作用

3 个答案: