javascript - 预加载图像 image.onload 脚本 MVC

Question

我的应用程序是一个 MVC，使用 MS SQL 来获取图像文件名。我正在使用以下脚本预加载图像；想知道如何在等待完成预加载时显示沙漏光标。

  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";

            }
        }

第一次效果很好，但是，当我从下拉列表中更改文件名时，即使加载了所有图像，沙漏也不会停止。提前致谢。

Answer 1

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

Answer 2

感谢 Musa 提供了最初的解决方案，这是我让它工作的方式，以防万一有人在寻找它：

 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;
       }