预加载图像image.onload脚本MVC

Question

My application is a MVC, using MS SQL to get the image file names. 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, count = 0;
            $('#selector').css('cursor', 'wait');
            for (i = 1; i < sl; i++) {
                images[i] = new Image();

                images[i].onload = images[i].onerror = function () {
                    count++;
                    if (count == sl) {
                        $('#selector').css('cursor', 'default');
                    }
                }
                 images[i].src = impath.toString() + im.toString() + i + ".jpg";

            }
        }

It works great first time, however, when I change the file name from a dropdownlist, the hourglass does not stop even all images are load. Thanks in advance.

Answer 1

从上面的代码中，您正在加载sl-1图像，但是停止等待光标的条件是sl图像（ if (count == sl) ），因此请将其更改为if (count == (sl-1))

Answer 2

Thanks to Musa for providing the initial solution, here is the way I got it to work, just in case someone is looking for it:

 var images = [];
        function preload_images() {
            showLoadingImage();
            $('#selector').css('cursor', 'wait');
            for (i = tochar; i < sl; i++) {
                images[i] = new Image();
                var name = impath.toString() + imStart.toString() + i + ext;
                images[i].src = 'ImageHandler.ashx?img=' + name + '&window=50&level=50 &slice=0';
                if (i == sl - 1) {
                    images[i].onload = images[i].onerror = function () {
                        $('#selector').css('cursor', 'Default');
                        hideLoadingImage(this);
                    };
                }
            }
        }
        function showLoadingImage() {
            $('#imagediv').append('<div id="imagediv1"><img src="../Content/images/ajax-loader2.gif" alt="Loading..." /></div>');
            $('#imagediv1').show();
        }

        function hideLoadingImage(img) {
            $('#imagediv1').hide();
            img.onload = img.onerror = null;
       }