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 秒才能加载并延迟整个页面的显示。感谢您的时间和帮助！

Answer 1

编辑
tks to @steve，我通过每小时查询一次 instagram api 来解决它并将响应保存到 instagram.json

get-social-media.php

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();

以及用于前端 social-media-block.phtml (magento & bootstrap) 的 ajax

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>");  
            }  
        }  
    }  
});  
}); 

这也适用于 facebook
对于 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*"(.+?)"/);

可能不是最好的代码，但至少是一个可行的解决方案。