0

我的 js onclick 事件不适用于我的投资组合。该页面可以在这里看到：http: //www.savantgenius.com/portfolio/branding这是脚本：

      <script type="text/javascript">
$(function() {
    var portDefault = 'bonya';
    $('#portItem').hide();
    $('#portLoader').fadeIn();
    $('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + ' #portLoadedContent', function() {
        $('#portLoader').fadeOut();         
        $('#portItem').fadeIn();
    });
    $('a.focusElement').focus();
});
function get_portfolio(portLocation) {
    $('#portItem').fadeOut();
    $('#portLoader').fadeIn();
    $('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + ' #portLoadedContent', function() {
        $('#portLoader').fadeOut();         
        $('#portItem').fadeIn();
    });
}

加载动画出现，但没有图像。任何想法都非常感谢，谢谢！

4

3 回答 3

1

离开@Christian Varga 的评论，您需要返回 HTML 并将源设置为您创建的链接。尝试类似：

$("#portItem").html($("<img>")
                        .attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));

而不是您的 .load() 行。

所以我猜你的最终功能应该是这样的：

function get_portfolio(portLocation) {
    $('#portItem').fadeOut();
    $('#portLoader').fadeIn();
    $("#portItem").html($("<img>")
                             .attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));
    // UPDATE:
    setTimeout(function () {
        $('#portLoader').fadeOut();         
        $('#portItem').fadeIn();
    }, 1000);
});

}

于 2012-06-22T04:53:21.117 回答
0

检查此解决方案：

HTML：

<div id="portItem"><img /></div>

JS：

$(function() {
    var portDefault = 'bonya';
    $('#portItem').hide();
    $('#portLoader').fadeIn();
        $('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent');
    $('#portItem img').load(function() {
        $('#portLoader').fadeOut();         
        $('#portItem').fadeIn();
    });
});
function get_portfolio(portLocation) {
    $('#portItem').hide();
    $('#portLoader').fadeIn();
    $('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent');

    //check if image is loaded, then hide loader + show image:

    $('#portItem img').load(function() {
        $('#portLoader').fadeOut();         
        $('#portItem').fadeIn();
    });
}

见演示：http: //jsfiddle.net/esqmr/1/

于 2012-06-22T05:17:12.030 回答
-1

尝试删除#portLoadedContent 之前的空格

 <script type="text/javascript">
$(function() {
    var portDefault = 'bonya';
    $('#portItem').hide();
    $('#portLoader').fadeIn();
    $('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent', function() {
        $('#portLoader').fadeOut();         
        $('#portItem').fadeIn();
    });
    $('a.focusElement').focus();
});
function get_portfolio(portLocation) {
    $('#portItem').fadeOut();
    $('#portLoader').fadeIn();
    $('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent', function() {
        $('#portLoader').fadeOut();         
        $('#portItem').fadeIn();
    });
}
于 2012-06-22T04:52:29.757 回答