Question

I am using the following script to preload images; would like to know How I can display hourglass cursor while waiting to complete the preload.

function preload_images() {

            var i;
            for (i = 1; i < sl; i++) {
                images[i] = new Image();
                $('#selector').css('cursor', 'wait');
                var name = impath.toString() + imStart.toString() + i + ext;
                images[i].src = 'ImageHandler.ashx?img=' + name + '&window=50&level=50 &slice=0';
                $('#selector').css('cursor', 'default');
            }
        }

Answer 1

Use the images’ load and error(in case any images don’t load) events to count how many images have been loaded, and when all loads remove the cursor.

    function preload_images() {
        var i, count = 0;
        $('#selector').css('cursor', 'wait');
        for (i = 0; i < sl; i++) {
            images[i] = new Image();
            var name = impath.toString() + imStart.toString() + i + ext;
            image[i].onload = image[i].onerror = function(){
                count++;
                if (count == sl){
                    $('#selector').css('cursor', 'default');
                }
            }                
            images[i].src = 'ImageHandler.ashx?img=' + name + '&window=50&level=50 &slice=0';
        }
    }