谷歌API加载的RSS提要仅在刷新后显示，而不是第一页加载

Question

我有一个页面显示使用Google API的RSS提要，但存在初始化问题。页面加载时，不会显示新闻项目。如果我刷新页面，那么它们就是。

我在HTML 中有这个

<div id="snews" style="position:relative; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;">
    <div id='feed-control'>
       <span style='color:#676767;font-size:11px;margin:10px;padding:4px;'>Loading...</span>
    </div>
        <script type='text/javascript'>
        // Load the feeds API and set the onload callback.
        google.load('feeds', '1');
            load_rss("http://www.catholicnewsagency.com/rss/news.xml");
        google.setOnLoadCallback(load_rss);
    </script>
</div> <!-- End snews -->

加载新闻项目的Google API调用就在这个函数中。

// Load RSS
function load_rss(url) {
    google.load("feeds", "1");
    var feed = new google.feeds.Feed(url);
    var entry_target = "viewer";
    /*************************************
    Feed Title       feed.title 
    Feed Link        feed.link 
    Feed Description feed.description 
    Feed Author      feed.author 
    Feed Entries     feed.entries[] 
    Entry Title      feed.title 
    Entry Link       feed.link 
    Entry Content    entry.content 
    Content Snippet  entry.contentSnippet 
    Published Date   entry.publishedDate 
    Categories       entry.categories[]
    **************************************/
    feed.setNumEntries(10);
    feed.load(function(result) {
        $('#feed-control').append('<table id="rssentries"></table>');
        if (!result.error) {
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var entrydate = new Date(entry.publishedDate);
            var entry_yr  = entrydate.getFullYear();
            var entry_mon = entrydate.getMonth()+1;
            if (parseInt(entry_mon) < 10 ) { entry_mon = "0"+entry_mon; }
            var entry_day = entrydate.getDate();
            if (parseInt(entry_day) < 10 ) { entry_day = "0"+entry_day; }
            var entry_date= entry_mon + "." + entry_day + ': ';
            $('#rssentries').append('<tr><td>'+entry_date+'<a href="'+entry.link+'" target="'+entry_target+'" onclick="show_title(''+escape(entry.title)+'');">'+entry.title+'</a></td></tr>');
          }
        }
    });
}

我应该为第一次显示的新闻项目修复什么？

Answer 1

开始时，不需要在页面上调用load_rss函数两次。

load_rss("http://www.example.com/rss/news.xml");
google.setOnLoadCallback(load_rss);

删除单独的load_rss调用，并保留google.setOnLoadCallback(load_rss);，因为它将在准备好触发函数时触发。

调用onLoad处理程序

.setOnLoadCallback(callback)是一个静态函数，它注册指定的处理程序函数，以便在加载包含此调用的页面时调用，其中回调是在加载包含文档并且API准备好使用时（例如，在onLoad之后）调用的必需函数。此功能在google命名空间（即google.setOnLoadCallback(callback);）上实现

然后转到您的函数声明，将前几行更改为以下内容：

function load_rss() {
    var url = "http://www.example.com/rss/news.xml";
    var feed = new google.feeds.Feed(url);

在这里，您将注意删除google.load('feeds', '1');，它在setOnLoadCallback之前已经调用过了。

除非你希望"Loading…"始终显示，否则你应该交换内容，而不是像这样附加：

$('#feed-control').html('<table id="rssentries"></table>');

Answer 2

问题是尚未加载容器元素。我不得不把脚本放在document.ready.中