Preloading a Json file with Ajax and Jquery

I have been working on a small project where I am loading in certain content and posts using a JSON file, bringing it in with AJAX and JQuery.

I have created a function with a parameter of a certain string and created a onclick event on a element in my HTML which. The onclick on my element then gives my function its string, which then changes the string value at the end of my Ajax URL which then loads a new json file with different content. But the loading between clicks is very long.

I would like to preload all the content before and maybe have a loading screen which I have already made. Then when the user clicks on the category it just quickly changes... but I'm not sure how haha.

I would appreciate any help. I can't seem to figure this one out. I have made a comment for the onlcick events in the html.

CODE -

function getposts(str) {
    
    var baseUrl = 'http://www.capetownetc.com/api/get_category_posts/?slug=';
    
    console.log(str);
    
    $.ajax({
        type: 'GET'
        , url: baseUrl + str
        , data: {
            get_param: 'value'
        }
        , dataType: 'json'
        , success: function postData(data) {
            //Image Post1
            var imgTitle1 = data.posts[0].title;
            imgTitle1 = imgTitle1.replace("Newsflash:", "");
            $('.ip1.text-heading').html(imgTitle1);
            var imgThumb1 = data.posts[0].thumbnail_images.full.url;
            $('.ip1.main-card-img1').css("background-image", "url(" + imgThumb1 + ")");
            //Text Post1
            var title1 = data.posts[3].title;
            title1 = title1.replace("Newsflash:", "");
            $('.p1.text-heading').html(title1);
            var ex1 = data.posts[3].excerpt;
            var maxLength = 100;
            ex1 = ex1.substr(0, maxLength);
            $('.p1.text-post-desc').html(ex1);
            var thumb1 = data.posts[3].thumbnail_images.full.url;
            $('.p1.card-img1').css("background-image", "url(" + thumb1 + ")");
            //Text Post2
            var title2 = data.posts[1].title;
            title2 = title2.replace("Newsflash:", "");
            $('.p2.text-heading').html(title2);
            var ex2 = data.posts[1].excerpt;
            ex2 = ex2.substr(0, maxLength);
            $('.p2.text-post-desc').html(ex2);
            var thumb2 = data.posts[1].thumbnail_images.full.url;
            $('.p2.card-img2').css("background-image", "url(" + thumb2 + ")");
            //Text Post3
            var title3 = data.posts[2].title;
            title3 = title3.replace("Newsflash:", "");
            $('.p3.text-heading').html(title3);
            var ex3 = data.posts[2].excerpt;
            ex3 = ex3.substr(0, maxLength);
            $('.p3.text-post-desc').html(ex3);
            var thumb3 = data.posts[2].thumbnail_images.full.url;
            $('.p3.card-img3').css("background-image", "url(" + thumb3 + ")");
        }
    });

}
getposts('news');
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>HSM App</title>
    <meta name="MobileOptimized" content="width">
    <meta name="HandheldFriendly" content="true">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    <link rel="icon" type="image/ico" href="http://www.hsm.co.za/images/interface/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/slick.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>

<body id="search">
    <div class="load-cont">
        <div class="loading"> <img src="img/hsmLogo2.png" class="logo" alt=" ">
            <h1>Highbury Media</h1> </div>
    </div>

    <div class="main-cont">
        <input type="checkbox" id="navigation" class="menu" />
        <label for="navigation"> &#9776; </label>
        <nav class="menuItems">
            <ul class="menuList">
                <li class="home"> <span></span><a href="">Home</a> </li>
                <li class="explore"> <span></span><a href="">Explore</a> </li>
                <li>
                    <p>Your Highbury</p>
                </li>
                <li class="interests"> <span></span><a>Your Interests</a> </li>
                <li class="book"> <span></span><a href="">Bookmarks</a> </li>
                <li class="history"> <span></span><a href="">History</a> </li>
                <li>
                    <p>Other</p>
                </li>
                <li class="feed"> <span></span><a href="">Feedback</a> </li>
            </ul>
        </nav>
        <div class="tag-options"></div>
        <section class="content">
            
            
            <div class="header-wrap">
                <div class="main-head">
                    <div class="logo-wrap">
                        <p>Higbury Media</p> <img class="nav-logo" src="img/hsmLogo.png"> </div> 
                    
                    <div class="search">
                            <!--OVERLAY SEARCH-->
                            <input type="checkbox" id="op" name="search" value=" ">
                            <div class="lower">
                                <label for="op">click the text</label>
                            </div>
                            <div class="overlay overlay-hugeinc col-12">
                                <label for="op"></label>

                                <textarea class="search-text" placeholder="SEARCH"></textarea>
                            </div>
                    </div>
                    
                </div>
/******ONLCIKS EVENTS*****/
                <div class="slider interest-slider">
                    <div>
                        <p onclick="getposts('news')" id="news">News</p>
                    </div>
                    <div>
                        <p onclick="getposts('events')" id="events">Events</p>
                    </div>
                    <div>
                        <p id="health">Nightlife</p>
                    </div>
                    <div>
                        <p>Dine</p>
                    </div>
                    <div>
                        <p>Outdoors</p>
                    </div>
                    <div>
                        <p>Video</p>
                    </div>
                </div>
            </div>
            
            <div class="slider slider-for">
                <div class="post-cont" id="news-cont">
                <div class="ip1 full-post-img">
                    <a class="link-click" id="post1">
                        <div class="ip1 full-post-info"> 
                            <a class="ip1 post-cat">Breaking News</a>
                            <h2 class="ip1 text-heading"></h2>
                            <p class="ip1 post-source"> / </p>
                        </div> 
                        
                        <span class="ip1 main-card-img1"></span> 
                    </a>
                </div>
                
                <div class="p1 full-post-text">
                    <a class="p1 link-click" href="#" target="_blank"></a>
                        <div class="p1 text-post-img">
                        <span class="p1 card-img1"></span>
                        <a class="p1 post-cat">Sport</a> 
                        </div>
                        <div class="p1 full-text-info">
                            <h2 class="p1 text-heading"></h2>
                            <p class="p1 text-post-desc"></p>
                            <p class="p1 post-source"> / </p>
                        </div>
                </div>
                
                <div class="p2 full-post-text">
                    <a class="p2 link-click" href="#" target="_blank"></a>
                        <div class="p2 text-post-img">
                        <span class="p2 card-img2"></span>
                        <a class="p2 post-cat">Local News</a> 
                        </div>
                        <div class="p2 full-text-info">
                            <h2 class="p2 text-heading"></h2>
                            <p class="p2 text-post-desc"></p>
                            <p class="p2 post-source"> / </p>
                        </div>
                </div>
                
                <div class="p3 full-post-text">
                    <a class="p3 link-click" href="#" target="_blank"></a>
                        <div class="p3 text-post-img">
                        <span class="p3 card-img3"></span>
                        <a class="p3 post-cat">Health</a> 
                        </div>
                        <div class="p3 full-text-info">
                            <h2 class="p3 text-heading"></h2>
                            <p class="p3 text-post-desc"></p>
                            <p class="p3 post-source"> / </p>
                        </div>
                </div>
                
            </div> 
<!--END OF SLIDE 1-->
            
<!--END OF SLIDE 3-->
            </div>
            
            <div class="post1 cont" id="cont">
                
                <div class="post-header">
                    <img class="back" src="img/back.png">
                    <ul>
                        <li><img class="like" src="img/like.png"></li>
                        <li><img class="dislike" src="img/dislike.png"></li>
                        <li><img class="share" src="img/share.png"></li>
                        <li><img class="bookmark" src="img/bookmark.png"></li>
                    </ul>
                </div>
                
                <div class="content-container">
                    <div class="header-img">
                        <span id="para-img"></span>
                    </div>

                    <div class="pageContent">
                        <a class="post-cat">Nature</a>
                        <h1>Whales now getting bigger, somehow..</h1>
                        <p class="lay2 post-source"> / </p>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum in erat quis malesuada. Suspendisse vitae augue luctus, hendrerit turpis nec, convallis arcu. Donec condimentum ante ut mi volutpat semper. Suspendisse malesuada urna libero, vel aliquet diam egestas quis. Vivamus justo arcu, sollicitudin ut lacus non, placerat dignissim tortor. In dapibus leo eget purus aliquet mattis. Proin tempus, lacus vel blandit lacinia, mauris lectus imperdiet felis, molestie dignissim augue elit et lacus.
                        <br><br>
                        Morbi consequat, urna vitae ultricies aliquam, mauris turpis vestibulum lacus, in luctus ex libero non ligula. Mauris eget dui dolor. Suspendisse quis eros massa. Ut vel bibendum orci. Suspendisse ac risus nec sapien tristique interdum. Aenean tristique est vitae nulla rhoncus mattis. Suspendisse vel odio sagittis, suscipit quam non, cursus velit. Proin ac quam varius odio ullamcorper tristique accumsan at purus. Etiam vestibulum metus nibh, ut elementum libero porttitor id. Fusce ultricies massa non risus vehicula lobortis. Phasellus aliquet turpis placerat ex tincidunt eleifend. Aenean feugiat ante vitae purus accumsan, ac dictum lorem interdum. Aliquam euismod auctor venenatis. Donec et eleifend urna, non pretium arcu. Etiam nec ante pellentesque, finibus libero at, varius augue.
                        <br><br>
                        Suspendisse varius mauris quis ex blandit iaculis. Ut quis nisl non tellus pulvinar lobortis. Duis tincidunt maximus urna vel vestibulum. Aenean sit amet mauris ut diam auctor convallis. Sed in urna purus. In rutrum, mi eget varius ornare, augue ex euismod sapien, eget dapibus metus nunc non purus. Duis at convallis massa. Fusce vitae dictum eros, non malesuada turpis. Cras enim purus, lacinia et euismod quis, volutpat et dui. Phasellus egestas auctor luctus. Vivamus nec luctus quam.
                        </p>
                        
                        <div class="post inter-tags">
                            <ul>
                                <li>
                                <input type="checkbox" value=" " class="tag">
                                <label for="tag" class="inter-label">Sa News</label>
                                </li>
                                <li>
                                    <input type="checkbox" value=" " class="tag">
                                    <label for="tagPol" class="inter-label">Politics</label>
                                </li>
                                <li>
                                    <input type="checkbox" value=" " class="tag">
                                    <label for="tagWN" class="inter-label">World News</label>
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
                
            </div>
            
        </section>
    </div>
    <!--SCRIPTS-->
    <script src="js/slick.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/fastclick.js"></script>
</body>

</html>

Answers 1

  • Howzit :)

    Decare global variables before firing your ajax to put your news and events data inside

     var newsData;
     var eventsData;
    
     function getposts(str) {
    
    
        //   You may want some logic when to display 
        //   your loading element here. like:
        //   if(str == 'news'){showLoadingElement()}
    
    
        var baseUrl = 'http://www.capetownetc.com/api/get_category_posts/?slug=';
    
        console.log(str);
    
        $.ajax({
            type: 'GET'
            , url: baseUrl + str
            , data: {
                get_param: 'value'
            }
            , dataType: 'json'
            , success: function postData(data) {
                if (str == 'news') {
                    newsData = data;
                }
                if (str == 'events') {
                    eventsData = data;
                }
            }
        });
    
    
        //
        //   Hide loading element here. Use logic for the last data loaded:
        //   if(str == 'events'){hideLoadingElement()}
    
    
    }
    getposts('news');
    getposts('events');
    

    Then seperate out your method for displaying posts. You can see the logic which switches between the data you loaded in your global variables.

    function displayPosts(str) {
        var data;
        if (str == 'news') {
            data = newsData;
        }
        if (str == 'events') {
            data = eventsData
        }
    
        //Image Post1
        var imgTitle1 = data.posts[0].title;
        imgTitle1 = imgTitle1.replace("Newsflash:", "");
        $('.ip1.text-heading').html(imgTitle1);
        var imgThumb1 = data.posts[0].thumbnail_images.full.url;
        $('.ip1.main-card-img1').css("background-image", "url(" + imgThumb1 + ")");
        //Text Post1
        var title1 = data.posts[3].title;
        title1 = title1.replace("Newsflash:", "");
        $('.p1.text-heading').html(title1);
        var ex1 = data.posts[3].excerpt;
        var maxLength = 100;
        ex1 = ex1.substr(0, maxLength);
        $('.p1.text-post-desc').html(ex1);
        var thumb1 = data.posts[3].thumbnail_images.full.url;
        $('.p1.card-img1').css("background-image", "url(" + thumb1 + ")");
        //Text Post2
        var title2 = data.posts[1].title;
        title2 = title2.replace("Newsflash:", "");
        $('.p2.text-heading').html(title2);
        var ex2 = data.posts[1].excerpt;
        ex2 = ex2.substr(0, maxLength);
        $('.p2.text-post-desc').html(ex2);
        var thumb2 = data.posts[1].thumbnail_images.full.url;
        $('.p2.card-img2').css("background-image", "url(" + thumb2 + ")");
        //Text Post3
        var title3 = data.posts[2].title;
        title3 = title3.replace("Newsflash:", "");
        $('.p3.text-heading').html(title3);
        var ex3 = data.posts[2].excerpt;
        ex3 = ex3.substr(0, maxLength);
        $('.p3.text-post-desc').html(ex3);
        var thumb3 = data.posts[2].thumbnail_images.full.url;
        $('.p3.card-img3').css("background-image", "url(" + thumb3 + ")");
    
    }
    

    Trigger your new method in your html:

    <div>
       <p onclick="displayPosts('news')" id="news">News</p>
    </div>
    <div>
       <p onclick="displayPosts('events')" id="events">Events</p>
    </div>
    

Related Articles