CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mwilson
mwilson

Reputation: 12970

jQuery Hide Class

I have a web page that is loading images and scans across about 600+ images as the user presses next or previous. This is working fine. However, the image load time is slow so the idea is to put a processing while in place of the images until they are fully loaded. I can get the processing wheel to load perfectly fine but I cannot get it to hide once the image or document is loaded. I have tried doing this two different ways:

Attempt 1:

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

Attempt 2:

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

I have also tried replacing the selector #centerImage on the .ready() function with document but still don't see the Processing Wheel get hidden.

What I find strange is that when I try and hide an ID instead of a Class, it works perfectly fine. I tried a 'Try Me' on W3 Schools with a simple example and hiding a class with the .hide() doesn't work there either.

Google isn't returning anything specific to any limitations with jQuery hiding classes. Is this possible or am I approaching this the wrong way?

NOTE: I'm using spin.js for the processing wheel.

All Code:

JavaScript:

EDIT: Added .load instead of .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>

Show Progress JavaScript File:

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

Thanks in advance for any helpful input.

Upvotes: 0

Views: 3368

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

As @Barmar $("#centerimage").ready() is the same as $(document).ready(). There's no separate ready event for each element, it just applies to the whole DOM.

Ready is used to check if the DOM is ready and the load is used to check if the Content is loaded.

Use load instead of ready:

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

Upvotes: 1

Related Questions