js onclick 事件不适用于我的投资组合答案

【问题标题】：js onclick event is not working for my portfoliojs onclick 事件不适用于我的投资组合
【发布时间】：2012-06-24 09:41:12
【问题描述】：

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

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

【问题讨论】：

您的代码中没有点击监听器...您是在尝试显示加载动画然后直接进入图像加载，还是在两者之间发生了实际用户提供的点击？
您在代码中的哪个位置声明了 click() 事件处理程序？
您正在尝试将图像的 原始数据 加载到您的 div 中。尝试使用 img 标记返回一些 HTML，或者返回图像 src 并使用 jQuery 创建一个新的 img 元素
onclick 是针对他们页面上的锚元素，调用 get_portfolio()

标签： javascript onclick thumbnails portfolio

【解决方案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();
    });
}

【讨论】：

这也会失败，因为返回的内容是图像，而不是 HTML（参见上面的 cmets）

【解决方案2】：

离开@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);
});

}

【讨论】：

fadeIn() 和fadeOut() 不是互相抵消吗？在触发代码底部的fadeOut()和fadeIn()之前，没有实现回调来检查图像是否完全加载...请检查这个问题。
@DexterHuinda 你是对的 - 我没有完全意识到这一点，但我不确定如何检查是否加载。我想在添加和最后进行淡入淡出之间使用 setTimeout 大约 1 秒。
@ianpgall 您可以使用 .load() 检查是否完成。请参阅下面的答案。

【解决方案3】：

检查这个解决方案：

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/

【讨论】：

如果您查看 .load() 的 jQuery API 页面，这不是检查图像加载的好方法：它不能始终如一地工作，也不能可靠地跨浏览器，它不会触发如果图像 src 设置为与以前相同的 src，则在 WebKit 中正确，它不会正确地冒泡 DOM 树，可以停止为已经存在于浏览器缓存中的图像触发。
@ianpgall 那么你有什么建议，如果有的话？