Как создать дополнительную кнопку для загрузки следующей серии фотографий с помощью моего скрипта

Question

Я получил этот аккуратный маленький скрипт в Instagram, который извлекает сообщения хештега, пропускающие процесс API, но я не знаю, как загрузить следующий пакет. Он будет загружать только до 6 фотографий одновременно.

Я пробовал что-то подобное

    <script type="text/javascript">
 $(window).scroll(function () {
         if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      return $insta_array;
         }
 });

    </script>

Но никогда не везло ..

        <?php

        function scrape_insta_hash($tag) {
  $insta_source = file_get_contents('https://www.instagram.com/explore/tags/'.$tag.'/'); // instagrame tag url
  $shards = explode('window._sharedData = ', $insta_source);
  $insta_json = explode(';</script>', $shards[1]);
  $insta_array = json_decode($insta_json[0], TRUE);
  return $insta_array; // this return a lot things print it and see what else you need
}

$tag = "beachglass";
$results_array = scrape_insta_hash($tag);
$limit = 500; // provide the limit thats important because one page only give some images then load more have to be clicked

/*for ($i=$limit; $i >= 0; $i--) */ for ($i=0; $i < $limit; $i++){

  if(array_key_exists($i,$results_array['entry_data']['TagPage'][0]["graphql"]["hashtag"]["edge_hashtag_to_media"]["edges"])){
    $latest_array = $results_array['entry_data']['TagPage'][0]["graphql"]["hashtag"]["edge_hashtag_to_media"]["edges"][$i]["node"];

      $newPosting = [
        "image"=>$latest_array['display_url'],
        "thumbnail"=>$latest_array['thumbnail_src'],
        "instagram_id"=>$latest_array['id'],
        "caption"=>$latest_array['caption']['edge_media_to_caption']['edges'][0]["node"]["text"],
        "link"=>"https://www.instagram.com/p/".$latest_array['shortcode'],
        "date"=>$latest_array['taken_at_timestamp']
      ];

       echo '<div class="photo"><a href="'.$newPosting['image'].'"><img src="'.$newPosting['thumbnail'].'"></a><div class="caption">'.$newPosting['caption'].'</div></div>';

  }
}

        ?>

Я могу заставить это отображать реальные результаты, только не загружая больше 60 или около того изображений.

Answer 1

Что вы можете сделать, это использовать AJAX и добавить лимит постов.Предположим, это div.Вы должны сохранить индекс сообщений в div. Сделайте это

echo '<div index="'. $i .'" class="photo"><a href="'.$newPosting['image'].'"><img src="'.$newPosting['thumbnail'].'"></a><div class="caption">'.$newPosting['caption'].'</div></div>';

И когда div находится внизу, вы можете отправить ajax как этот

$(window).scroll(function() {
  let index = $('.photo:last').attr("index"); // get the last div's index
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    $.ajax({ //create an ajax request to your .php file
      type: "POST",
      url: "yourphppage.php",
      data: 'moreposts=' + index, // add a a parameter
      dataType: "html", //expect html to be returned
      success: function(msg) {
     }
    });
  }
});

Теперь сделайтеВаша $limit переменная является глобальной переменной, так что вы можете редактировать ее значение в области видимости.Как это

$limit = 6; //default limit

if (isset($_POST["moreposts"])) {
   $lastindex = (int)$_POST["moreposts"];
   $limit = $lastindex * 2 // or anything you want
}

function scrape_insta_hash($tag) {
  ...
for ($i=0; $i < $limit; $i++){
...

Лично.Я не рекомендую webscraping.Это уродливый способ получения данных.Они также могут изменить свою разметку в любое время.