Question

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

尝试1：

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

尝试2：

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

我还尝试用。#centerImage替换.ready（）函数中的选择器document，但仍然没有看到处理轮被隐藏。

我觉得很奇怪的是，当我尝试隐藏ID而不是类时，它的工作原理非常好。我试过试试我＆＃39;在W3学校上有一个简单的例子并隐藏了一个.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文件：

function showProgress（）{

    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而不是ready：

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

jQuery隐藏类

1 个答案: