javascript - 将第一个 img src 从已解析的 feed 传递到另一个 elem 的 bg img 属性

Question

所以，本质上我是用 jQuery 解析一些 RSS 提要。我想获取最新解析的IMAGE并获取最新的(或第一个实例)img src并填充我的第二个指定元素的 css background-image:属性(property)及其内容。所以，我的第一个实例img src从我的提要输出中，还将用它的内容填充我的第二个元素的背景图像。我一直在使用以下逻辑。但是，我总是得到 background-image: 'undefined'在控制台中。

由于某种原因，它没有读取或捕获下面第一行填充图像的第一个实例。

 var HeadImg = $('.featimg img').first().attr('src'); // not pulling
 $('.site-featured-content').css('background-image', 'url(' + HeadImg + ')');

下面是我的完整的 JS 上下文。

我也尝试过将以上两行移动到 rss feed JS 之前和之后。

 jQuery(document).ready(function($){ 

  var url = window.location.href;

  if (url.indexOf('check') > -1) {  
      $(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
  }
  if (url.indexOf('movies') > -1) { 
      $(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
  }
  if (url.indexOf('host') > -1) { 
      $(".feed1").rss("http://www.dlisted.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed2").rss("http://stupidcelebrities.net/feed/",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
  }
if (url.indexOf('TheCollegeLife') > -1) { 
      $(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
  }
  if (url.indexOf('WingmanConnect') > -1) { 
      $(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
  }
  if (url.indexOf('Media2point0') > -1) { 
      $(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
  }
  if (url.indexOf('Brokepoint') > -1) { 
      $(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
      })
      $(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
      {
        limit: 17,
        entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
       })
    }
    var HeadImg = $('.featimg img').first().attr('src');
    $('.site-featured-content').css('background-image', 'url(' + HeadImg + ')');
})

<小时/>

注意://是的，<div class="featimg">{teaserImage}</div>呈现为 <div class="featimg"><img class="class" src="/img.jpg"></div>

Answer 1

按照建议:

function waitForCompleteRender()
{
    var HeadImg = $('.featimg img').first();
    if (HeadImg.length == 0) return setTimeout(waitForCompleteRender, 200);

    $('.site-featured-content').css('background-image', 'url(' + HeadImg.attr('src') + ')');

}

waitForCompleteRender();

编辑

请注意，这种方法对于生产使用来说非常危险(如果图像根本没有渲染)。您可能需要添加一个 if 语句，它将在 X 次失败后处理错误......