Instagram的異步飼料

Question

下面這個帖子How to get a user's Instagram feed，我用它來顯示最後一個圖像

     function fetchData($url){ 
     $ch = curl_init(); 
     curl_setopt($ch, CURLOPT_URL, $url); 
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
     curl_setopt($ch, CURLOPT_TIMEOUT, 20); 
     $result = curl_exec($ch); 
     curl_close($ch); 
     return $result; 
     } 

     $result = fetchData("https://api.instagram.com/v1/users/123456789/media/recent/?access_token=123456789.123asdsd.asdadasdas23423423&count=1"); 
     $result = json_decode($result); 
     foreach ($result->data as $post) { 
     if(empty($post->caption->text)) { 
     // Do Nothing 
     } 
     else { 
     // Display img 
     } 
     } 

如何可以加載異步？有時甚至需要2-3秒來加載並延遲整個頁面才能顯示。 Tks給你時間和幫助！

Answer 1

編輯
TKS到@steve，我解決了這個問題由每小時一次查詢Instagram的API，並保存響應instagram.json

得到-社會忽略原始

function get_instagram($user_id=instagram_user_id,$count=1){ 

$instaurl = `https://api.instagram.com/v1/users/`.$user_id.`/media/recent/?access_token=instagram_access_token&count=`.$count; 

$instacache = `instagram.json`; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
curl_setopt($ch, CURLOPT_HEADER, false); 
curl_setopt($ch, CURLOPT_URL,$instaurl); 
$instadata=curl_exec($ch); 
curl_close($ch); 

if(file_exists($instacache) && filemtime($instacache) > time() - 60*30){ 
    //echo "ok instagram"; 
} else { 
    $jsonInstaData = json_decode($instadata,true); 
    file_put_contents($instacache,json_encode($jsonInstaData)); 
} 
} 
echo get_instagram(); 

and ajax for frontend social-media-block.phtml（magento & bootstrap）

jQuery(document).ready(function($) { 
$("#instagram-img").html(""); 
$.ajax({ 
    type: "GET", 
    async: true, 
    contentType: "application/json; charset=utf-8", 
    url:"resources/socialmedia-cache/instagram.json", 
    dataType: "json", 
    cache: true, 
    beforeSend: function() { 
     $("#loading").show(); 
    }, 
    success: function (data) { 
     console.log(data); 
     $("#loading").hide(); 
     if (data == "") { 
      $("#InstaContainer").hide(); 
     } else { 
      $("#InstaContainer").show(); 

      for (var i = 0; i < data["data"].length; i++) { 
       var dataForJson = JSON.stringify(data.data[i]); 
       var date = new Date(parseInt(data.data[i].caption.created_time) * 1000); 
       $("#instagram-img").append("<a target=`_blank` href=`" + data.data[i].link + "` title=`" + data.data[i].caption.text + "`><img src=`" + data.data[i].images.low_resolution.url + "` class=`img-responsive socialmedia-img`></img></a>"); 
       $("#instagram-img").append("<p align=`left`><script>" + "jQuery(document).ready(function() { jQuery(`a.timeago`).timeago();});" + "</" + "script><a class=`timeago` style=`color:#484848;` title=`" +(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear()+", "+date.getHours()+":"+date.getMinutes()+ "`>" +(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear()+", "+date.getHours()+":"+date.getMinutes()+ "</a></p>"); 
      } 
     } 
    } 
}); 
}); 

這也適用於臉書
爲pinterest，我使用http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1&q=https://www.pinterest.com/MyPinterest/feed.rss，一個快速的解決方案，將rss轉換爲json。因爲我需要大於236px的圖片，接下來解析的是736px。此外，IMG SRC需要從內容

var string = data.responseData.feed.entries[i].content; 
var filtered = string.replace('/236x/', '/736x/'); 
var source = filtered.match(/src\s*=\s*"(.+?)"/); 

可能不是最好的代碼中提取，但至少是一個可行的解決方案。