Question

我的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();
    });
}

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

Answer 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);
});

}

Answer 2

检查此解决方案：

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/

Answer 3

尝试删除#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();
    });
}

js onclick事件对我的投资组合不起作用

3 个答案: