• Главная»
  • Уроки»
  • PHP»
  • ВИДЕО: Автоматическая подгрузка контента при прокручивании страницы

ВИДЕО: Автоматическая подгрузка контента при прокручивании страницы

sourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Станислав Протасевич
Урок создан: 27 Апреля 2013
Просмотров: 28430
Правила перепечатки


5 последних уроков рубрики "PHP"

  • Фильтрация данных с помощью zend-filter

    Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.

  • Контекстное экранирование с помощью zend-escaper

    Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

  • Подключение Zend модулей к Expressive

    Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

  • Совет: отправка информации в Google Analytics через API

    Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

  • Подборка PHP песочниц

    Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 27 Апреля 2013 15:42
    newrus
    все не мог понять, как узнать, что пользователь дошел до конца страницы ))) Спасибо! Полезный для меня урок!
  • 27 Апреля 2013 18:40
    TOIIOP
    А как сделать чтобы запрос начинался за 200px до конца сайта? Чтоб пользователю к моменту прокрутки сайта вниз, уже подгружался контент? И еще... как добавить анимацию (крутилка такая) когда данные загружаются?
    • 27 Апреля 2013 20:15
      stas.protasevich
      1. Чтобы запрос начинался раньше, в проверке нужно отнять от $(document).height() нужное вам значение
      if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProcess)
      2. О том как при загрузке добавит различного рода анимацию, думаю, посвящу отдельный урок.
      • 23 Июня 2013 17:28
        bubaew
        Хороший урок
  • 27 Апреля 2013 23:44
    Ygreec
    Хорошая вещь, как раз в тренде))... Вопрос: это ведь не должно утяжелять страницу - потому что подгружаемая часть не существовала, а значит - не сидела в кэше? Прав ли я? Потому что не хотелось бы, чтобы при первоначальной загрузке страницы она открывалась долго - потому что загружается весь контент, но нижняя часть скрывается (наподобие hidden)?
    • 27 Апреля 2013 23:55
      stas.protasevich
      Конечно этот способ не утяжелитель страницу, ведь изначально мы выбираем небольшую пачку данных. Затем делаем запросы за следующими пачками (практически аналог перехода по страницам). С кэшем конечно система будет выглядеть иначе. Посложнее.
      • 28 Апреля 2013 07:39
        semsev
        урок очень хороший и очень во время ) но совет на будущее звук ВСЕГДА пиши отдельно
  • 28 Апреля 2013 00:21
    Hannnn
    while + foreach вместо одно while, с точки зрения оптимизации кода, как то уж слишком дурной пример, новичкам, да и защиту сразу стоило бы показывать как делать.
    • 28 Апреля 2013 09:15
      stas.protasevich
      1. Защите лучше посвятить отдельный урок. Нельзя мешать всё в одном. 2. На счёт while + foreach - совсем не дурной пример. В БД-шных оболочках и не такие финты используются (бывает и больше прокруток по циклам); Это нормально. Сейчас вычислительные мощности компов настолько мощные, что данный приём, можно сказать, совсем не влияет на производительность. Вообще говоря данный приём применяется и в различных MVC системах, для разделения работы с БД и выводом информации. Так что ничего страшного тут нет. Наоборот. Для читабельности кода, лучше использовать этот способ. Не открещивайтесь от него сразу. Подумайте.
    • 28 Апреля 2013 12:40
      serjikz
      давайте тогда вообще в ООП уйдем. Составим запрос в методе, обработаем его и вернем массив сразу в то место, где он должен находиться, разобрав его там форичем. Это был пример реализации, а не указ "Делайте только так и никак больше".
      • 28 Апреля 2013 12:43
        stas.protasevich
        Конечно. Путь каждый делает так как ему удобней. Кто ж спорит? :)
  • 28 Апреля 2013 00:50
    vUdav
    Наконец то! Я так долго ждал этого урока) Хотя я уже и реализовал давным давно эту функцию на сайте, но теперь я хоть понимаю, что и как, а еще очень полезная защита от быстрого скроллинга, все никак не мог избавить от того, что данные подгружались по несколько дублей.
  • 28 Апреля 2013 01:20
    Flex27
    контЕнт))
  • 28 Апреля 2013 03:00
    soprun.vladislav
    stas.protasevich, спасибо :)
  • 28 Апреля 2013 09:00
    Акбар Saydrecks
    А что там за редактор??? что за черная программа там используеться???
    • 28 Апреля 2013 09:26
      stas.protasevich
      В данном видео использовался PhpStorm 6. Тема: Dracula. Тёмное оформление мне кажется не так бьёт по глазам.
      • 28 Апреля 2013 21:01
        Акбар Saydrecks
        Спасибо Стас
  • 28 Апреля 2013 10:26
    corvus007
    А можно к описанию видео на YouTube добавлять и ссылку на исходники или на страницу этого сайта с данным уроком?
  • 28 Апреля 2013 12:00
    ghbrjkbcn
    видео класное действительно это даёт больше возможностей пользователю либо он хочет увидеть 20 новостей либо он хочет посмотреть ещё вместо постраничной навигации код конечно значительно сокращается вопрос в другом как сделать так что бы не использовалась функция auto_load а с возможностью выбора тоесть обычный <button> прикрепить или ссылку при нажатии на которую подгружались ещё 20 новостей тоесть вот эту проблему можно как то решить если есть возможность ответте сдесь или на почту fantom.seller@yandex.ru вот с кнопочкой очень необходимо потому что я всё равно всё в ассоциотивном массиве кручу будет полезно
    • 28 Апреля 2013 12:19
      stas.protasevich
      Данный код очень просто меняется, если вы хотите подгружать контент нажатием кнопки. Поставьте кнопку посте блока с id="news"
      <div id="news">...</div>
      <button id="load">Загрузить</button>
      
      $(window).scroll(function() { поменяйте на:
      $("#load").click(function(){
      
      • 28 Апреля 2013 17:57
        ghbrjkbcn
        спасибо сейчас попробую.....Заработало отлично отсалось всё стелизовать а как сделать эфект затухания тоесть что бы новые запеси менялись (уберали) старые нажал посмотреть ещё 20 и показалось 20 вместо первых 20? возможно так
    • 28 Апреля 2013 12:36
      serjikz
      Прикрепите исполнение аякса не к концу прокрутки страницы, а к нажатию кнопки (метод click в jQuery) и вам не нужен будет document height и прочие. Просто если кнопка нажата - исполнить аякс запрос.
  • 28 Апреля 2013 12:34
    serjikz
    Я бы подправил PHP. 1. Запрос $query писать не сразу mysql_query, а просто строку запроса, а в следующей переменной $result = mysql_query($query) к примеру. Это будет правильней с точки зрения удобности кода. 2. mysql_fetch_array будет удалена из функционала в следующей версии php, поэтому стоит пользоваться mysql_fetch_assoc
    • 28 Апреля 2013 12:46
      stas.protasevich
      Это общий пример. С ним можно делать дальше всё, что только в голову придёт. Менять код, туда-сюда.. На счёт mysql_fetch_array и другой функции, о которой вы сказали: в PHP 5.5 mysql_fetch_assoc так же не будет.
      http://www.php.net/manual/ru/function.mysql-fetch-assoc.php
      В будущих версиях PHP общение с БД будет осуществляться только через MySQLi или PDO_MySQL.
      • 28 Апреля 2013 19:08
        serjikz
        увы, да. Многим придется переучиваться и писать через MySQLi.
  • 28 Апреля 2013 12:45
    rymaruk
    То что нужно) Как говорится, открыли глаза)) Благодарю!
  • 28 Апреля 2013 16:40
    saynez
    Как индексируются поисковыми системами такие страницы?
    • 28 Апреля 2013 17:24
      stas.protasevich
      Для поисковых систем индексируйте новости (или подобные страницы) отдельно.
  • 28 Апреля 2013 19:04
    lumore
    защиту сделайте получше, за 2 сек. обошел
    • 29 Апреля 2013 01:35
      rekon
      Защиту чего?
  • 28 Апреля 2013 23:03
    igontarev
    Стас, офигенски, то что нужно!
  • 28 Апреля 2013 23:57
    newrus
    хотелось бы урок, как сделать простой слайдер, чтобы он сам крутил контент или же с помощью кнопок навигации, или смешанный вариант. при австоскролле остановка на событие hover. ну можно скролл и колесиком добавить, но это не важно. Важен сам принцип написания :)
    • 29 Апреля 2013 10:58
      igontarev
      кстати да, вот именно по слайдеру вообще нет видео, многие статьи по слайдеру написаны слишком сложные, чтобы понять полностью весь код, простой слайдер нужен на jquery
      • 29 Апреля 2013 12:57
        onestep21
        простите за оффтоп, но я поддерживаю идею со слайдером
  • 30 Апреля 2013 19:45
    Huf_141
    Кто-нибудь подскажет как сделать, чтобы вместо текста подгружались картинки?
    • 30 Апреля 2013 20:36
      stas.protasevich
      заноси в базу адрес к картинкам и просто выводи в <img src="{полученный адрес из БД}" />
  • 3 Мая 2013 03:38
    Gerrar
    Большое спасибо! Давно ищу подобный урок но качественного так и не находил, а Ваш урок очень хороший и понятный.
  • 30 Мая 2013 00:12
    tlustenko
    Стас, большое спасибо за урок. В особенности хочется поблагодарить за отзывчивость (а также за чёткий голос - хорошо слушается и воспринимается). Если есть возможность, напиши пожалуйста заметку о совместимости скриптов: часто бывает так, что некоторые скрипты конфликтуют друг с другом, в результате чего не работает ни один, ни другой, либо работает один, а второй не работает. Порой не помогает даже jquery.noConflict расскажи пожалуйста в какой последовательности нужно правильно подключать js-скрипты (в частности на данный момент не работает автоподгрузка контента на аяксе с фансибоксом - конкретно: после установки автоподгрузки перестал работать fancy (до этого работал), но зато автоподгрузка работает как надо). За ранее благодарю. Павел
    • 30 Мая 2013 05:18
      stas.protasevich
      Здравствуйте. Благодарю за отзыв. Возьму на заметку ваше предложение. Если у вас есть возможность, можете прислать свой скрипт, для того чтобы я разбирался сразу же с реальной проблемой? Если да, то пришлите на stanislav.protasevich@mail.ru Спасибо
  • 17 Июня 2013 10:20
    sav_2
    Отличный урок! Как раз то, что мне нужно! Спасибо.
  • 18 Июня 2013 14:36
    sav_2
    А как сделать подгрузку по категориям? Т.е. мне нужно, чтобы в зависимости от того, где находится пользователь (категория вводится в файле categories.php с помощью метода GET (categories.php?cat=1)), выводились записи, которые принадлежат определенной категории. (файл load.php) require_once 'config.inc.php'; $num = $_GET['num']; // Нужно, номер категории в файле categories.php, присвоить переменной $cat $query = mysql_query("SELECT * FROM `lessons` WHERE cat='$cat' ORDER BY `id` DESC LIMIT {$num}, 10"); Как это осуществить?
  • 14 Апреля 2015 15:33
    victor_dementiev
    Что будет, когда строки в базе для вывода закончатся? Запрос к базе будет срабатывать в пустую? Я правильно понимаю, что, чтобы такого не случилось, нужно создать дополнительную переменную, в которой будем хранить количество записей в БД и когда num в JS дойдет до этого значения, больше не посылать запросы AJAX?
^ Наверх ^