Whether pictures will be loaded if the parent is invisible, i.e. display: none ?

  1. If so, how to prevent it, how can I load different permissions for different devices?
  2. Goal: to reduce the time of loading pictures

Uses bootstrap, originally thought to use hidden-xs, hidden-md.

  • one
    display: none removes an item from home. So in theory, the pictures will not be uploaded (I could be wrong). For such things, you can use visibility: hidden;opacity:0; - Vasily Barbashev
  • You can load pages without any images or with a single-pixel plug. So far, for example, the element has a class "noimg" - we use a stub. If a picture is an element, then we place a stub for this element, while at the same time we define some id at the element itself. When this element needs to be displayed - we call AJAX to the server, we inform it of the element id, in response we get the address of the picture. The picture (address) is written to the src property via attr ( api.jquery.com/ATTR ). True then we will depend on JS. You can add additional styles in css in the spirit of "stub instead of a picture". - DimXenon
  • @DimXenon, why AJAX? You can simply set the necessary src attributes and remove the class that is responsible for canceling their display, and the browser will pull up the images: jsfiddle.net/ozmumLzh - Roman Grinyov
  • You can directly, of course. The variant with AJAX implies greater flexibility in the choice of displayed content. For example, if we still don’t know (at the time of the return of the page with the script) what the user wants to see, or what we want to show him (Luntik or Lara Croft is topless). - DimXenon
  • @DimXenon, however, in fact, if we are dealing with images, you can still just assign src attributes ... Although, I don’t have the right to argue about the correctness of one or another :) - there is little experience. - Roman Grinyov

3 answers 3

Whether pictures will be loaded if the parent is invisible, i.e. display: none ?

Will be.
Checked out right now out of interest.
Chrome50 , FF44 .

  1. But this is a bad method, better use stubs or lazy loading of pictures.

    will be uploaded, you can implement a php algorithm similar to the one that we see when we open the site from a mobile device, and throws us on the mobile version of the site (not adaptive but mobile).

     display: none;

    I don’t recommend using them for pictures.

      There is such an implementation option:

       picture { display: block; width: 100%; text-align: center; } img { max-width: 100%; } 
       <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> <picture> <source media="(min-width: 650px)" srcset="yacht.jpg"> <source media="(min-width: 465px)" srcset="bee.jpg"> <source media="(min-width: 100px)" srcset="queenstown.jpg"> <img src="yacht.jpg" alt="a cute kitten"><!-- Если браузер вдруг не поддерживаетэту функцию --> </picture>

      Pictures are NOT loaded for other sizes until other sizes come.