Я создаю одну страницу с одним контейнером информации. Содержимое контейнера переключается, когда пользователь нажимает на определенные кнопки слева. Однако в этот момент сайт загрузит каждую часть контента. Один из них содержит мое портфолио, которое (будет) - большая коллекция изображений, которая быстро прекращает загрузку сайта.
Поэтому я не хочу составлять содержимое определенного загружаемого файла, пока кнопка не покажет содержимое этого div.
Для быстрого примера того, чего я пытаюсь достичь:
Перейдите на страницу http://iscs.nl/testpage_changecontent.html.
Содержимое div, которое не должно быть загружено при запуске, это #page_portfolio, которое будет показано нажатием кнопки #pagebutton_portfolio. Примечание. Эти идентификаторы не используются на тестовой странице вышеуказанной ссылки.
Спасибо, ребята, смотрите на код.
предполагая, что содержимое портфолио было в portfolio.html
:
$('#tabcontent2').click(function(e){
$('#content_1').hide();
$("#content_2").show()
// grab portoflio.html and place its contents within #content_2
.load('portfolio.html');
e.preventDefault();
});
Вы даже можете использовать data-*
чтобы не перезагружать страницу (выборка один раз):
$('#tabcontent1').click(function(e){
$('#content_2').hide();
$('#content_1').show();
e.preventDefault();
});
$('#tabcontent2').click(function(e){
$('#content_1').hide();
var $content2 = $("#content_2").show();
// check if it been loaded before
if (!($('#content_2').data('loaded') || false)){
// grab portoflio.html and place its contents within #content_2
$content2.load('portfolio.html', function(){
// set the flag to say we've already loaded this content
$content2.data('loaded',true);
});
}
e.preventDefault();
});
Используйте ajax для загрузки содержимого. Вам понадобится php файл, но он будет запущен только при запуске js-события.
othercontent.html
Вот одно простое решение специально для вас.
замените существующий JS-код на этот:
function replace(content) {
$('#content').html(content);
$('#content').show();
}
$('#tabbutton1').click(function() {
$.get("content1.html", replace(content));
$('#content').hide();
});
$('#tabbutton2').click(function() {
$.get("content2.html", replace(content));
$('#content').hide();
});
наконец, замените ваши div с идентификаторами "content_1" и "content_2" на один div с id = "content":
<div id="content">The text displayed until the user clicks any link</div>
С наилучшими пожеланиями.
|| false
в вашем чеке? Почему бы и нет:if (!$('#content_2').data('loaded'))
?