js onclick событие не работает для моего портфолио

Мое событие js onclick не работает для моего портфолио. На странице можно увидеть здесь: http://www.savantgenius.com/portfolio/branding и это скрипт:js onclick событие не работает для моего портфолио

 <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-22 Kachi Christos

Я не видел никаких onclick? – xdazz

В вашем коде нет прослушивателя кликов ... вы пытаетесь отобразить анимацию загрузки, а затем сразу перейти к загрузке изображения или есть фактический пользовательский клик, который возникает между ними? – chaoskreator

где в вашем коде вы объявили обработчик события click()? –

-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-22 04:52:29 legendofawesomeness

, это также не удастся обратный контент - это изображение, а не HTML (см. комментарии выше) –

Уходя комментарий @Christian Варги, вы должны вернуть 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-22 04:53:21 Ian

Это должно работать :) –

не отменяет fadeIn() и fadeOut() друг друга? не было обратного вызова, чтобы проверить, полностью ли загружено изображение, прежде чем запускать fadeOut() и fadeIn() в нижней части кода ... проверьте эту проблему. –

@DexterHuinda, вы правы - я точно не это понял, но я не был уверен, как проверить, загружен ли или нет. я думаю, используя setTimeout в течение 1 секунды, между добавлением и выполнением затухания в конце. – Ian

Проверить это решение:

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-22 05:17:12

Если вы посмотрите на страницу API jQuery для .load(), это не отличный способ проверить загрузку изображения: он не работает последовательно и не надежно кросс-браузер, он не срабатывает корректно в WebKit, если изображение src устанавливается на тот же самый src, что и раньше, он неправильно выравнивает дерево DOM, может перестать запускаться для изображений, которые уже находятся в кеше браузера. – Ian

@ianpgall, так что вы предлагаете, если они есть? –

js onclick событие не работает для моего портфолио

ответ

Смежные вопросы