Question

I’m using the following jQuery code to hide and show some HTML element in the page:

/* Previous
------------------------------------------------------------ */
jQuery(document).ready(function($) {
    $('li.menu-item a').hover(
    function() {
        var $this = $(this);
        $this.css('backgroundImage', $this.css('backgroundImage').replace("_off","_over"));
    },
    function() {
        var $this = $(this);
        $this.css('backgroundImage', $this.css('backgroundImage').replace("_over","_off"));
    });

/* Workarounds
------------------------------------------------------------ */
    var url = window.location.pathname;

    // Hide image on company description
    if(url.indexOf('/view/') >= 0) {
            $('.wp-post-image').css('display','none');
    }

/* Customizations
------------------------------------------------------------ */
    if(url.indexOf('/view/') >= 0) {
        $('td:contains("English First Tianjin")').before('<img src="" />');
    }


});

In this page:

http://goldstarteachers.com/esl-jobs-in-china/view/passionate-young-learner-teachers-wanted-in-tianjin-china/

The problem is that I can see the elements that I don’t want to display for a couple of seconds.

How can I make it so that I don’t see them while the page is loading?

Answer 1

You use css to set initial state where they are hidden and then use jQuery to display them.

So:

.wp-post-image {
  display:none;
}

is set in CSS instead of jQuery.