markup.html

<div class="cycle-slideshow" 
	data-slides=">div"
    	data-cycle-auto-height="calc"
>
	<div>
		<img src="img1.jpg" width="###" height="###">
		<p>caption 1</p>
	</div>
	<div>
		<img src="img2.jpg" width="###" height="###">
		<p>caption 2</p>
	</div>
	<div>
		<img src="tiniest.gif" data-src="img3.jpg" width="###" height="###">
		<p>caption 3</p>
	</div>
	<div>
		<img src="tiniest.gif" data-src="img4.jpg" width="###" height="###">
		<p>caption 4</p>
	</div>
</div>

script.js

$('.cycle-slideshow').on( 'cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
    // the slide after the next slide 
    futureSlideContents = $(optionHash.slides[optionHash.nextSlide + 1]);
    // if the slide has descendants, replace with its descendant imgs
    if (futureSlideContents.children().length) { 
         futureSlideContents = futureSlideContents.find('img');
    }
    futureSlideContents.each(function() {
     	// if the source contains "tiniest.gif", replace src with the data-src
	    if ($(this).attr("src").indexOf("tiniest.gif") >= 0) {
		    $(this).attr("src", $(this).attr("data-src")); // 
	    }
    });		
});