jQuery 隐藏类

Question

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

尝试 1：

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

尝试 2：

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

我还尝试将 .ready() 函数上的选择器 #centerImage 替换为 document，但仍然没有看到处理轮被隐藏。

我觉得奇怪的是，当我尝试隐藏 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() 相同。每个元素没有单独的 ready 事件，它只适用于整个 DOM。

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

使用加载而不是就绪：

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