У меня есть слайд, сделанный с помощью jQuery.Это 936 пикселей в длину.Все отдельные фрагменты слайдов имеют класс .slide и уникальные идентификаторы и заключены в div #slideinner.
Мое намерение состояло в том, что всякий раз, когда div с классом .slide появляется в поле зрения, он загружает контент с внешней HTML-страницы;и всякий раз, когда слайд будет меняться, а div не будет виден (то есть находится ли он влево или вправо), тогда он будет избавляться от загруженного содержимого и будет просто пустым div, это будет повторяться всякий раз, когда он будет виден или былиз этого.
Чтобы определить погоду, был виден .slide div, я использовал viewport jQuery плагин.
Однако способ, которым я кодировал вещи, кажется, не делаетони работают так, как я намеревался.
Я покажу вам, что я сделал, и, надеюсь, вы скажете мне, что я делаю неправильно.
Я загружаю скрипт slide.js (сценарий, который анимирует мой слайд) вместе с viewport.js и jQuery в головной части страницы, а затем добавляю следующий код в каждый div с классом .slide.
Это то, что я использовал для первого и третьего слайдов.
Слайд 1
<div id="homes" class="slide">
<script type="text/javascript">
$('#homes').load('pageone.html #homepage');
</script>
</div>
Слайд 2
<div id="blogs" class="slide">
<script type="text/javascript">
$('#blogs').ready(function ()
{
$('.control').bind('click', function()
{
if ($('#blogs').is(":in-viewport"))
{
$('#blogs').load('pagetwo.html #blog');
}
else
{
$('#blogs').empty();
}
});
});
Слайд 3
<div id="portfolio" class="slide">
<script type="text/javascript">
$('#portfolio').ready(function ()
{
$('.control').bind('click', function()
{
if ($('#portfolio').is(":in-viewport"))
{
$('#portfolio').load('pagethree.html #homepage');
}
else
{
$('#portfolio').empty();
}
});
});
</script>
</div>
Всего я использую четыре слайда.
Последний слайд следует тому же шаблону, что и слайд 2 и 3 (тот же код, разные идентификаторы и загруженная страница.)
.control - это имя класса стрелок влево и вправо, которые перемещают слайд.
Причина, по которой мой первый слайд не имеет того же кода, что и слайд два, а остальные - потому чтоего содержимое не загружается при загрузке страницы;потому что он полагается на событие click, чтобы проверить, находится ли оно в области просмотра.
Это компромисс, с которым я мог бы жить, но вот основные проблемы, которые мне нужно исправить.
У меня возникают следующие проблемы:
Сначала, когда страница загружается, и я нажимаю стрелку вправо, и появляется новый слайд, firebug показывает, что все слайды загрузилисодержимое с их html-страниц, даже если они не отображаются.
Где, как следует, загружать только содержимое слайда 2 (и слайда 1, потому что у него нет метода .empty)
Сначала я подумал, что этобыла проблема с плагином окна просмотра или с тем, как он использовался, однако затем я заметил вторую проблему.
Во-вторых, когда я достиг последнего слайда (в данном случае слайда 4), все слайды все еще имели загруженное содержимое;однако, когда я щелкнул стрелку влево, чтобы вернуться к третьему слайду, все слайды (кроме слайда 1 вне курса) выполнили команду .empty и были пустыми.
Если бы я щелкнул стрелку влево еще раз, чтобы перейти к слайду 2, слайды снова загрузили бы все свое содержимое, и я увидел бы содержимое слайда 2.
Это сбило с толкуменя касалось, является ли это проблемой плагина окна просмотра, или как я ее использовал, или кодом, который я написал, или, возможно, недосмотром.
По сути, я хочу, чтобы каждый из .slide div загружал контент с внешней страницы, если это слайд, просматриваемый пользователем, и удалял этот загруженный контент, или оставался пустым, если онне просматривается пользователем.
Я надеюсь, что есть способ улучшить этот код, чтобы сделать это, или, возможно, другой способ сделать это.Я надеюсь, что кто-то может помочь мне.