HTMLCSS site only loads image after a refresh on mobile - Stack Overflow

admin管理员组

文章数量:1391943

My website has a logo at the start of the main page, and it only appears on mobile after you refresh once. Here is the site before a refresh:

No Logo Here is the site after a refresh: With Logo

On the HTML, the image box is shown via

<div class=imgbox>
  <p><img src="lambda.png"></p>
</div>

The imgbox class is in the mainpage css as

.imgbox{    
   display:grid;
   height:100%; 
}

And the lambda class is in the mainpage css as

.lambda{     
  padding: 0;     
  display: block;     
  margin: 0 auto;     
  max-height: 100%;     
  max-width: 58%; 
}

I did this to evenly display the image so it can take up the most space possible while also showing the buttons for the stories.

My website has a logo at the start of the main page, and it only appears on mobile after you refresh once. Here is the site before a refresh:

No Logo Here is the site after a refresh: With Logo

On the HTML, the image box is shown via

<div class=imgbox>
  <p><img src="lambda.png"></p>
</div>

The imgbox class is in the mainpage css as

.imgbox{    
   display:grid;
   height:100%; 
}

And the lambda class is in the mainpage css as

.lambda{     
  padding: 0;     
  display: block;     
  margin: 0 auto;     
  max-height: 100%;     
  max-width: 58%; 
}

I did this to evenly display the image so it can take up the most space possible while also showing the buttons for the stories.

• html
• css
• image

Share Improve this question Follow edited Mar 13 at 8:49 law_81 2,42188 gold badges2929 silver badges4141 bronze badges asked Mar 12 at 17:53 lambdafluxlambdaflux 511 bronze badge 2

• I cannot reproduce this problem using an iPhone showing your website. Please provide a snippet which you have tested shows the problem. What devices are you finding the logo doesn’t appear on? – A Haworth Commented Mar 12 at 19:51
• @AHaworth It's not happening now, but I have a video that I took screenshots of (photos in the post) where it has happened. If the logo is loading fine for you then I might ignore it for now unless it comes back – lambdaflux Commented Mar 12 at 20:41

Add a comment  | 

2 Answers 2

Sorted by: Reset to default -1

For images, being in development on this myself for a long time, I recommend loading by javascript, it results in increased speed and stability, you would no longer have to worry about refresh lag or other things.Using onload with js and enjoy. a one example:

        function affiche(tab_path){
    var length_finish = tab_path.length;
    var numb_image = 0;
    if(length_finish > 0){
        readAll();
    }
    
  
  function readAll(){
     var img;
     
        if(numb_image == (length_finish - 1))
        {
            console.log('pool finished all pictures are loaded');
        }
        else
        {
            img = new Image();
            
            /*OPTIONAL you can attribute data personnel in you're picture before treatment or resize or choose or nothing...
            img.name = //transforme name of picture before show
            img.setAttribute('data-name', 'here possible you can put information useful for you');
            img.id = String(numb_image)+'_img';*/
            
            //picture ready do you whant...
            img.onload = function(e)
            {
              numb_image = numb_image + 1;
              //here i put image in my carousel swiper
              var divi = '<div class="lighter column"><p class="carte-titre row evenly-center">'+img.name+'<input value='+img.id+' type="checkbox" class="pict_sel"></p>'+'<p class="carteInfo row evenly-center"><i class="fa-solid fa-maximize"></i>'+carrousel.tab_image['dim'][carrousel.numb_files-1]+' <i class="fa-solid fa-scale-balanced"></i>'+carrousel.formatePoid(carrousel.tab_image['actual_poid'][carrousel.numb_files-1])+'</p></div>';
              carrousel.swiper.appendSlide('<div class="column end swiper-slide">'+$(img).prop('outerHTML')+divi+'</div>');
              carrousel.swiper.update();
              //and i continue pool
              readAll();
            };
            
            //this launch a treatment load
            img.src = tab_path[numb_image];
        }
  };

Your code is very dirty...
As a suggestion, set .imgbox { display: block; }

本文标签： HTMLCSS site only loads image after a refresh on mobileStack Overflow