Hi,

I have a web page which has a number of images each in their own div and with html rendered text in each div too - something like:

HTML Code:
<div class="yui3-u-1-3 first promosLeft" style="width: 318px; margin: 0 0 0 15px;"> 
            <a href="/somepage" title="Image"><img class="lazy" src="http://www.mysite.com/image.gif")" alt="Alt Text" width="318" height="394"  style="display:block" border="0"></a> 
            <a class="ed1 textFade" href="/somepage" style="position: absolute; left: 412px; top:226px; font-family: Times,'Times New Roman', serif; font-size: 16px; line-height: 18px; text-align: center; text-decoration:none; color:#000;" title="Image">Text to fade in when image loads</a>
            <a class="textFade" href="/somepage" style="position: absolute; left: 439px; top:276px; font-family:Helvetica, Arial, sans-serif; text-decoration:none; color:#000; font-size:18px; font-weight: bold !important;" title="Sell Link">More text to fade in when image loads</a>
        </div>
So the page loads fine, LazyLoad works perfectly on the images, as the page is scrolled the images fade in. I have used the following coder to achieve this:

Code:
$("img.lazy").lazyload({ 
    effect : "fadeIn"
});
What I am trying to do is fade in the html text relevant to each specific div - that is all text with the class textFade, at the same time as the image. I have achieved this through the following code, but through testing it seems a bit heavy in Firefox and IE7:

Code:
<script type="text/javascript">
$(document).ready(function () {
    $(".textFade").each(function() {
        var container = $(this).parent(),
        offset = container.offset(),
        pageBottom = $(window).scrollTop() + $(window).height();
        if (offset.top <= pageBottom) {
            $(this).fadeIn(2000);
        } else {
            $(window).scroll(function() {
                $(".textFade").each(function() {
                    var containerScrolled = $(this).parent(),
                    x = containerScrolled.offset(),
                    containerScrolledPosTop = x.top,
                    containerScrolledHeight = containerScrolled.height() *.9,
                    containerScrolledVisible = containerScrolledPosTop + containerScrolledHeight,
                    pageBottomScrolled = $(window).scrollTop() + $(window).height();
                    if (containerScrolledVisible <= pageBottomScrolled) {
                        $(this).fadeIn(2000);
                    }
                });
            });            
        }
    });
});
</script>
Does anyone have any ideas about how I can make this code more lightweight, or how I can actually plug this function into LazyLoad itself, so that it triggers each time after an image is loaded?

I have seen this code on the LazyLoad website and think I can probably modify it?

Code:
$(function() {          
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});
I'm not sure exactly what that code is doing, but if "sporty" is the name of a function, should I be able to give my function a name and simply replace "sporty" with whatever my function is called?

I'm a bit lost with this and would appreciate any help!