YUI Image Loader Images Above Fold Not Loading Until Scroll event.

Question

I have a function that is called on the window.onload event to create a group of images and render via the scroll event.

function LoadImages(){  
    var foldGroup = new YAHOO.util.ImageLoader.group(window, 'scroll'); 
    for(var i=0; i<someCounter; i++){
        var locationId = locationsArr[i];
        foldGroup.registerSrcImage('Location_' + locationId, GetImageDomain()+'/templates/Includes/imagehandler.ashx?locationId=' + locationid);
    }
    foldGroup.foldConditional = true; 
    foldGroup.addTrigger(window, 'resize');
}

The problem I'm having is that when the page loads, the images "above the fold" are not rendered until I scroll. Is there any tips on troubleshooting this? I'm totally not a js/frontend guy :)

Thanks in advance!

Answer 1

I just tried this inline instead and it worked fine:

<script type="text/javascript">
var foldGroup = new YAHOO.util.ImageLoader.group(window, 'scroll'); 
for(var i=0; i<someCounter; i++){
    var locationId = locationsArr[i];
    foldGroup.registerSrcImage('Location_' + locationId, GetImageDomain()+'/templates/Includes/imagehandler.ashx?locationId=' + locationid);
}
foldGroup.foldConditional = true; 
foldGroup.addTrigger(window, 'resize');</script>

In case anyone has a better answer, I'd definitely be interested.

Answer 2

Don't use window.onload. If you're already using YUI 2 I suggest including the Event module and setting up your ImageLoader onDOMReady. Without seeing the page in question I can't really say if that was your problem or not but it will definitely save you from headaches in the future.

Answer 3

Hi Mike

Since the ImageLoader utility uses page load to examine image positions, you need to create your group and register images before that point. Either inline, as you've discovered, or at DOM ready time, as Tivac suggests.

There is a change to ImageLoader to address this issue, though it won't be available until the next YUI 2 release. You can follow it here - http://yuilibrary.com/projects/yui2/ticket/2527646