HowTo: spare server resources

[flapane]

If you have jquery on the page cpmfetch outputs the pics to, you may want to consider loading the images ONLY whenever an user scrolls to them.
This may prove useful if you choose to load intermediate or even full size pics.
You can use jquery unveil ( http://luis-almeida.github.io/unveil/ ):

Code Select Expand


<script type="text/javascript">
(function(e){e.fn.unveil=function(k,d){function c(){g=b.filter(function(){var a=e(this);if(!a.is(":hidden")){var b=f.scrollTop(),d=b+f.height(),c=a.offset().top;return c+a.height()>=b-h&&c<=d+h}}).trigger("unveil");b=b.not(g)}var f=e(window),h=k||0,l=1<window.devicePixelRatio?"data-src-retina":"data-src",b=this,g;this.one("unveil",function(){var a=this.getAttribute(l);if(a=a||this.getAttribute("data-src"))this.setAttribute("src",a),"function"===typeof d&&d.call(this)});f.on("scroll.unveil resize.unveil lookup.unveil", c);c();return this}})(window.jQuery||window.Zepto);
$(function() {
$("img").unveil(100);
});
</script>


Then, open cpmfetch.php and edit line 1551:

Code Select Expand

$htmlOut .= '<img src="/img/ajax-loader.gif" data-src="' . $imagefile . '"';

...where ajax-loader.gif is whatever loading spinning ball you prefer.

You can see the result on my homepage ( http://www.flapane.com )