loading - FORUM - Ning Creators Social Network2024-03-28T22:41:23Zhttps://creators.ning.com/forum/topics/feed/tag/loadingWhy the Load is so bad?https://creators.ning.com/forum/topics/why-the-load-is-so-bad2020-03-31T22:50:10.000Z2020-03-31T22:50:10.000ZFabricio Giugnihttps://creators.ning.com/members/FabricioGiugni<div><p>Hi there,</p><p>I have been testing my Network in some tolls like Page speed from Google and the result is so bad. What can we do to get it better? My Network should be loading better on smartphones and desktop as well. Any tip? Check the Screenprint </p><p><a href="{{#staticFileLink}}4287714754,original{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4287714754,RESIZE_710x{{/staticFileLink}}" width="710" alt="4287714754?profile=RESIZE_710x" /></a></p></div>Ning 3.0 Tip: Infinite Scroll for Photos (Loading More Images ... )https://creators.ning.com/forum/topics/ning-3-0-tip-infinite-scroll-for-photos-loading-more-images2014-03-19T16:43:29.000Z2014-03-19T16:43:29.000ZSweetPotatohttps://creators.ning.com/members/SweetPotato<div><p>Hi all,</p>
<p style="text-align: left;">I've been playing around with the awesome <a rel="nofollow" href="http://www.infinite-scroll.com/" target="_blank">Infinite Scroll</a> jQuery plugin to get it to work with Ning 3.0 photos.</p>
<p style="text-align: center;"><span style="text-decoration: underline; color: #3366ff;"><em><strong>Tested on V1 Aloe theme and V2 Infinity theme</strong></em></span></p>
<p><span style="color: #000000;"><strong>What does this tip do?</strong></span> Instead of seeing the pagination buttons at the bottom of your photos page, you'll instead get the next page of photos automatically loading below those already there.</p>
<p>Here's what you need to do:<br> <br> <span style="color: #000000;"><strong>1)</strong></span> Load the jquery.infinitescroll.min.js on your site by adding the following code to <em>Social Site Manager > Custom Code > End of Page code</em></p>
<p><span style="color: #3366ff;"><script type="text/javascript" src="http://storage.ning.com/topology/rest/1.0/file/get/956929?profile=original"></script></span></p>
<p><span style="color: #000000;"><strong>2)</strong></span> <em>Go to Social Site Manager > Sites & Pages</em> and select your Photo content instance. Open the Below Header HTML box and insert the following code, depending on which Design Studio theme version you're using:<br> <br> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557241?profile=original">Click to Enlarge<img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557241?profile=RESIZE_320x320" width="300"></a></p>
<p></p>
<p><span class="font-size-4"><strong><span style="color: #3366ff;">VERSION 1 Theme</span></strong></span></p>
<p><span style="color: #3366ff;"><script type="text/javascript"></span><br> <span style="color: #3366ff;">xg.addOnRequire(function () {</span><br> <span style="color: #3366ff;">x$(document).ready(function() {</span><br> <br> <span style="color: #3366ff;">x$('.matrix .row .span:has(.matrix-itemFrame)').addClass('photoListPage-entry');</span><br> <br> <span style="color: #3366ff;">var curPage = 1;</span><br> <span style="color: #3366ff;">var pagesNum = x$(".pagination").find(".pagination-number.pagination-last").text(); // Number of pages</span><br> <br> <span style="color: #3366ff;">x$('.photoListPage .matrix .row').infinitescroll({</span><br> <br> <span style="color: #3366ff;">navSelector : ".pagination", </span><br> <span style="color: #3366ff;">// selector for the paged navigation (it will be hidden)</span><br> <br> <span style="color: #3366ff;">nextSelector : ".pagination-next", </span><br> <span style="color: #3366ff;">// selector for the NEXT link (to page 2)</span><br> <br> <span style="color: #3366ff;">itemSelector : ".matrix .row .span", </span><br> <span style="color: #3366ff;">// selector for all items you'll retrieve</span><br> <br> <span style="color: #3366ff;">loading: {</span><br> <span style="color: #3366ff;">img: "http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original",</span><br> <span style="color: #3366ff;">msgText: "Loading more photos ..."</span><br> <span style="color: #3366ff;">},</span><br> <br> <span style="color: #3366ff;">},function() { // Optional callback when new content is successfully loaded</span><br> <br> <span style="color: #3366ff;">curPage++;</span><br> <br> <span style="color: #3366ff;">if(curPage == pagesNum) {</span><br> <br> <span style="color: #3366ff;">x$(window).unbind('.infscr');</span><br> <br> <span style="color: #3366ff;">} else {}</span><br> <br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;"></script></span></p>
<p><span class="font-size-4" style="color: #3366ff;"><strong>VERSION 2 theme</strong></span><br> <br> <span style="color: #3366ff;"><script type="text/javascript"></span><br> <span style="color: #3366ff;">xg.addOnRequire(function () {</span><br> <span style="color: #3366ff;">x$(document).ready(function() {</span><br> <br> <span style="color: #3366ff;">var curPage = 1;</span><br> <span style="color: #3366ff;">var pagesNum = x$(".pagination").find(".pagination-number.pagination-last").text(); // Number of pages</span><br> <br> <span style="color: #3366ff;">x$('.grid-frame.sheet ul.matrix.row').infinitescroll({</span><br> <br> <span style="color: #3366ff;">navSelector : ".pagination", </span><br> <span style="color: #3366ff;">// selector for the paged navigation (it will be hidden)</span><br> <br> <span style="color: #3366ff;">nextSelector : ".pagination-next", </span><br> <span style="color: #3366ff;">// selector for the NEXT link (to page 2)</span><br> <br> <span style="color: #3366ff;">itemSelector : ".photoListPage-entry", </span><br> <span style="color: #3366ff;">// selector for all items you'll retrieve</span><br> <br> <span style="color: #3366ff;">loading: {</span><br> <span style="color: #3366ff;">img: "http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original",</span><br> <span style="color: #3366ff;">msgText: "Loading more photos ..."</span><br> <span style="color: #3366ff;">},</span><br> <br> <span style="color: #3366ff;">},function() { // Optional callback when new content is successfully loaded</span><br> <br> <span style="color: #3366ff;">curPage++;</span><br> <br> <span style="color: #3366ff;">if(curPage == pagesNum) {</span><br> <br> <span style="color: #3366ff;">x$(window).unbind('.infscr');</span><br> <br> <span style="color: #3366ff;">} else {}</span><br> <br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;">});</span><br> <span style="color: #3366ff;"></script></span></p>
<p></p>
<p><span style="color: #000000;"><strong>3)</strong> Now add this css in the Design Studio Custom CSS (this positions the loading gif) - both V1 and V2 of Design studio:</span><br> <br> <span style="color: #3366ff;">#infscr-loading {</span><br> <span style="color: #3366ff;"> margin: 20px;</span><br> <span style="color: #3366ff;"> text-align: center;</span><br> <span style="color: #3366ff;">}</span><br> <br> <a href="http://whineglass.ning.com/photos-beta" target="_blank">See it in action here</a> (on my messy sandbox site - sorry!)</p>
<p>Enjoy</p>
<p>SP</p>
<p><br> <strong>Notes:</strong></p>
<p>i) The method i've used here adds script to the 'Below Header Ad' box in order to get round the fact that photo pages no longer have a standard Body class css selector (i.e. it's determined by your page name). I wanted this to work for everyone. However, you can include the script in the <em>End of Page code</em> by targeting the photo page specific body class selectors should you wish to avoid adding it in the below header ad box.</p>
<p>ii) The documentation on the <a rel="nofollow" href="http://www.infinite-scroll.com/" target="_blank">Infinite Scroll</a> jQuery plugin site is patchy to say the least. Much of it is outdated.</p>
<p>iii) You can change the loading gif image and the text that accompanies it by altering the following code as it appears above:</p>
<p><span style="color: #000000;">loading: {</span><br> <span style="color: #000000;">img: "<span style="color: #3366ff;"><a href="http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original">http://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original</a></span>",</span><br> <span style="color: #000000;">msgText: "<span style="color: #3366ff;">Loading more photos ...</span>"</span><br> <span style="color: #000000;">}</span></p>
<p></p>
<p></p>
<p></p>
<p></p></div>