2009-12-18 3 views
2

Я уже около недели изучаю PHP, jQuery и AJAX и быстро набираю. Я создаю новый видео-сайт с системой комментариев, в которой мне нужна небольшая помощь. На сайте представлен список видеоминиатюр, и когда пользователь нажимает на миниатюру, JQuery автоматически изменяет HTML на этой странице, чтобы показать правильное видео:

$(".thumbnailcontainer img").click(function() { 

    var yt_vid = $(this).attr("id"); 

    $("#youtube").fadeOut(300, function() { 
     //$("#content").append('<img src="img/design/icons/loading.gif" alt="Currently Loading" id="loading" class="loading" />'); 
     $("#youtube").replaceWith('<object id="youtube" type="application/x-shockwave-flash" style="width:640px; height:385px; display:none;" data="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1"><param name="movie" value="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1" /><param wmode="transparent"><\/param><\/object>'); 
     /*$("#loading").fadeOut(500, function() { 
      $(this).remove(); 
     });*/ 

     $('#youtube').fadeIn(1000); 
    }); 

(я временно закомментировать значок загрузки, потому что im'm пытаясь понять, как отображать его поверх видео на YouTube, а не подталкивать его под ним ... если вы можете ответить на этот вопрос, бонусные очки для вас.)

В любом случае, в зависимости от того, какое видео отображается, я необходимо, чтобы комментарии, связанные с этим видео, отображались снизу. Я хотел комментарии динамически изменять OnClick, а также, так что я создал этот код:

//Send POST data to PHP script to switch to correct comments 
//Select Thumbnail's second parent's ID attr on click 
    var commentsID = $(this).parents("div:eq(1)").attr("id"); 

    $.ajax({ 
     url: 'php/comments.inc.php', 
     type: 'POST', 
     data: 'commentsID=' + commentsID, 
     success: function(html) { 
       $('#comments').html(html); 
       $("#db").attr("value", '' + commentsID + ''); 
     } 
    }); 
}); 

Это по существу захватывает имя таблицы MySQL из атрибута ид миниатюры, постов в скрипт, который возвращает правильные комментарии и наборы значение скрытой формы, которое сообщит форме, в которую помещается столбец.

Чтобы определить последнее добавленное видео и вернуть правильные комментарии, я решил отправить сообщение ajax с идентификатором таблицы первого эскиза на загрузку документа на скрипт и добавить возвращаемые комментарии и сформировать скрытое значение устанавливается через ajax.

Мой вопрос - это вышеприведенная практика - плохая идея? То есть, мне кажется, неэффективно делать так много сообщений, чтобы переключиться на правильные комментарии - разве это не то, что является ресурсоемким? Кроме того, безопасно ли иметь имена таблиц базы данных, которые можно легко увидеть в атрибуте id моих миниатюр, чтобы мой скрипт мог указать, к какой базе данных подключиться?

Спасибо за вашу помощь и любые предложения по пути. Это мой первый пост здесь, и он кажется очень полезным веб-сайтом.

+0

Dave, когда вы говорите, что имя таблицы 'commentsID' является строкой, а не идентификатором? –

+0

Да, имя переменной немного вводит в заблуждение. Переменная на самом деле задана именем таблицы, а затем отправлена ​​в скрипт, чтобы сообщить ей, в какую таблицу искать. Безопасно ли иметь имена таблиц общедоступными? –

ответ

1

Наличие одного или даже нескольких аякс-запросов на загрузку страницы может фактически немного ускорить время загрузки из-за его асинхронного характера. Для людей довольно часто делать несколько аякс-запросов при загрузке, а его техника, которая делает загрузку страниц быстрее.

Возможно, вы захотите вернуть более стандартизованный тип данных. Если вы отправили содержимое и метаданные из комментариев в строку json, вы могли бы сами создать комментарии и сохранить значительную сумму передачи (всего лишь повторяющиеся теги html).

Другим трюком, используемым несколькими веб-сайтами, является привязка загрузки комментариев к области просмотра. Если комментарии не могут быть видны (если они находятся ниже складки), то нет причин для их загрузки. Затем, когда/если пользователь прокручивается вниз, вы можете сделать запрос в этой точке.

Что касается бонусных очков для флеш-видео, вам нужно будет изучить параметр wmode и установить его на transparent. Вы также можете использовать стандартизированный инструмент инъекции swf, такой как swfobject (или это версия плагина jQuery), чтобы добавить эти видео на страницу.

+0

Спасибо за ответ, Алекс. Я буду смотреть в JSON, поскольку я не знаю в первую очередь об этом. Кроме того, wmode на самом деле уже настроен на прозрачность в моем коде, и казалось, что load.gif был наложен на .fadeOut видео, но был нажат на .replaceWith ... не уверен, что это будет вызвано, так как исходный и замененный код имеет прозрачный параметр. –

+0

Попробуйте '.after()' вместо '.append()'. – nyuszika7h

0

Возможно, вы захотите использовать комментарии loading.gif. Скрипт, который отображает видео YouTube, будет запускаться мгновенно без каких-либо задержек, так как это просто инъекция HTML на страницу. Фактическая загрузка видео не зависит от вашей страницы.

Что касается loading.gif нажатием на видео, вам нужно сделать CSS position:absolute; с индексом z выше 1 на этом изображении. Это приведет к отображению контекста из потока страницы и позволит ему наложить видео. Вы можете центрировать положение изображения, используя верхний и левый CSS-свойства. Убедитесь, что ваше изображение и видео являются контейнером, который имеет position:relative;.

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