javascript - jQuery 隐藏类

Question

我有一个网页正在加载图像，并在用户按下下一张或上一张时扫描大约 600 多张图像。这工作正常。然而，图像加载时间很慢，所以我们的想法是在图像完全加载之前用一个处理代替图像。我可以让处理轮完美加载，但一旦加载图像或文档，我就无法隐藏它。我尝试过两种不同的方式:

尝试 1:

$('#centerImage').ready(function () {
    $('.spinner').css('display', 'none');
});

尝试 2:

$('#centerImage').ready(function () {
    $('.spinner').hide();
});

我也尝试用 document 替换 .ready() 函数上的选择器 #centerImage 但仍然没有看到 Processing Wheel 被隐藏。

我觉得奇怪的是，当我尝试隐藏一个 ID 而不是一个类时，它工作得很好。我用一个简单的例子在 W3 Schools 上尝试了一个“试试我”，用 .hide() 隐藏一个类在那里也不起作用。

Google 不会返回任何特定于 jQuery 隐藏类的任何限制。这是可能的还是我的处理方式有误？

注意:我正在为处理轮使用 spin.js。

所有代码:

JavaScript:

编辑:添加了 .load 而不是 .ready

var previousImage = document.getElementById("previousImage");
var centerImage = document.getElementById("centerImage");
var nextImage = document.getElementById("nextImage");

previousImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblPreviousImage").innerHTML);
centerImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblCenterImage").innerHTML);
nextImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblNextImage").innerHTML);

$('#centerImage').load(function () {
    $('.spinner').hide();
});

HTML/ASP.NET:

<div id="images">
        <img id="previousImage" onload="showProgress()" alt="" src=""/>
        <img id="centerImage" onload="showProgress()" alt="" src=""/>
        <img id="nextImage" onload="showProgress()" alt="" src=""/>
        </div>

显示进度 JavaScript 文件:

函数显示进度(){

    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };
    var target = document.getElementById('images');
    var spinner = new Spinner(opts).spin(target);
}

在此先感谢您提供任何有用的意见。

Answer 1

因为@Barmar $("#centerimage").ready() 与 $(document).ready() 相同。每个元素没有单独的就绪事件，它只适用于整个 DOM。

Ready用于检查DOM是否就绪，load用于检查Content是否加载。

使用 load 而不是 ready:

$('#centerImage').load(function () {