Doubt about hide () and show () in jquery

Question

Doubt about hide () and show () in jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I am very new to web programming and I have some doubts about the hide () and show () of jquery. There goes:

We have a website where a lot of images are loaded in a grid format (about 140).

When we open / load the web page, the images are loaded in a random way, that is to say, the images that are the first ones are loaded first and as the page is loaded the others are loaded but in a random way (eg: load the one in position 100, then load the one in position 13, then the 39, then the 12, then the 120 ...).

What you need to do is to load sequentially from top to bottom as you scroll. Leaving aside the use of LazyLoad, my question is this:

If when I load the DOM the images that are not visible to the naked eye I hide them with hide () and when the sidebar reaches the end of the page I show them with the show (), does this reduce the loading time of the page (what do we want) or even if the hidden images are loaded the same as loading the DOM? That is to say, even if the image is in hide () it will have loaded also being hidden or it will be loaded when it shows it? (show ())

I guess I have not explained myself very well but ... well, let's see if anyone can answer me.

Thank you.

jquery html imagen dom

asked by M. Giner 08.09.2017 в 13:40

source

3 answers

Problem to save a Form_tag with remote true strncpy function simulation

score 0 · Answer 1

0

You can make the images have a style="display:none;" online and then with a loop of js go showing them (fadein)

answered by 08.09.2017 в 14:01

score 0 · Answer 2

The main question of your question is answered by jQuery, when talking about hide() they say the following in a note, at the end :

Note: This method may cause performance issues, especially when used on many elements. If you're encountering such issues, use performance testing tools to determine if this method is causing them. Moreover, this method can cause problems with responsive layouts if the display value differs at different viewport sizes.

Note: This method can cause performance problems, especially when it is used in many elements . If you are with these problems, use performance testing tools to determine if this method is causing them. In addition, this method can cause problems with responsive designs if the value of Display differs in different sizes of graphic window.

Your other question about what happens when you use hide() is also explained in the documentation:

With no parameters, the .hide() method is the simplest way to hide an element:
$( ".target" ).hide();
The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css ("display", "none"), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, It will once again be displayed inline.

Without parameters, the .hide() method is the easiest way to Hide an item:
$ (".target").hide();
Matching elements will be hidden immediately , without animation. This is more or less equivalent to calling .css ("display", "none") , except that the value of the property of visualization is saved in the jQuery data cache to be able to restore its initial value again . If an item has a value of inline display and it is hidden, then it will show new online.

The same performance warning is in regards to show() :

Note: This method can cause performance problems, especially when it is used in many elements . If you are with these problems, use performance testing tools to determine if this method is causing them. In addition, this method can cause problems with responsive designs if the value of Display differs in different sizes of graphic window.

In conclusion

I do not think using hide() / show() is a good idea to solve your problem.

score 0 · Answer 3

Problems always arise when there is a lot of information load, but if they are images, you thought about dividing the load into pages, categories or something? On the other hand, if I understand what your website does, I would show a gif of loading up to the ready of the document, and then I enable the user to see the page, you can also show thumbnails and click to load the image in the right size, in short, you have to be careful when you load a lot of info, greetings.