Better load experience on photos

[UpstateLeafPeeper]

@tracknut

Well, you’ve been looking at that code for a while, I’m just seeing it now for the first time. From your description, please tell me how big the file images/poster.png is on your server, as I assume that’s your thumbnail.

Yes, in Coothead’s reply, he used “poster.png” as the thumbnail.

In real life, my newly down-sized thumbnails run about 80KB in size.

@tracknut

Then in the div below (for which the comment is “Video”) I really can’t find any image file. Coothead’s no bozo, so I’m sure this works, but it’s not immediately obvious to me.

In this code mockup, I had asked Coothead how to make his idea work for video as well - this the name of the ZIP.

So most of the time, when you click on a thumbnail, that < div > loads an enlarged photo that is around 500KB in size and has a long-side of 800px.

In this example, when you click on the thumbnail, it loads a video instead. So for this code, you’ll see a “test-video.mp4” in the “video” folder.

(The problem that i was having with videos is that they were spilling outside the screen, so with change one line to height: 90vh the video started fitting in the pop-up modal. Other than that, the logic is entirely the same for photos or videos. HTH.)

@tracknut

As to the console in Firefox, you could just bring up your page, right click on one of the thumbnails, select “Inspect Element” and you should get the console and a little view of that image that shows the size (in pixels). If that’s not the size of the thumbnail you expect, we’ve got a problem.

That wouldn’t help.

To be clear… With pure photo situations, I have one physical file that is a thumbnail (i.e. 80KB) and then another physical file that is a detailed-photo (i.e. 500KB).

When the gallery loads, clearly you see all thumbnails. HOWEVER, who is to say that the larger image isn’t getting loaded in the background because my CSS is not behaving as expected?

Follow me?

@tracknut

You could also look at the “Network” tab in the console, and see all the images downloaded on that browser refresh, and the size of each one. Presumably they should all be the size of a thumbnail, not of the large images.

When I do that all I see is “main.css”

[tracknut]

@UpstateLeafPeeper

To be clear… With pure photo situations, I have one physical file that is a thumbnail (i.e. 80KB) and then another physical file that is a detailed-photo (i.e. 500KB).

When the gallery loads, clearly you see all thumbnails. HOWEVER, who is to say that the larger image isn’t getting loaded in the background because my CSS is not behaving as expected?

Follow me?

I follow you. How do you know those thumbnails you’re seeing are not just reduced versions of the larger image? I gave you a way to find that out. How do you determine if your larger image has been loaded on the page somewhere? I gave you a way to find that out. Without being able to look at your page myself, all I can give you is the way to do it yourself.

When I do that all I see is “main.css”

Hit the refresh button on the browser.

[UpstateLeafPeeper]

@tracknut

I follow you. How do you know those thumbnails you’re seeing are not just reduced versions of the larger image?

Because the code says that is impossible…

When it is a photo-to-photo situation, the detailed-photo comes from
On my actual site, the thumbnail comes from

        <li id="li1">
          <!-- Gallery Image (thumbnail) -->
          <a class="thumbnail" href="#li1">
            <img src="$thumbnailSrc/{$thumbnailPhotoValue}" title="" alt="">
          </a>

And the detailed-photo comes from…

          <div>
            <!-- Menu Items -->
            <a class="closeWindow" href="#containerMast_fixed">Close</a>
            
            <!-- Detailed-Photo -->
            <img src="$detailedSrc/{$detailedPhotoValue}" title="" alt="">
          </div>

Furthermore, the detailed photos are in my “_photos” directory and thumbnails are in my “_thumbnails” directory, so it’s idiot-proof.

[UpstateLeafPeeper]

I think the problem is that my detailed-photos are getting loaded in the background when they are not supposed to be!

I went into my “photo-gallery.php” file and commented out the code that loads the modal window and detailed-photo, and while still somewhat slow, the page load time is cut down substantially!

@tracknut

I gave you a way to find that out. How do you determine if your larger image has been loaded on the page somewhere? I gave you a way to find that out. Without being able to look at your page myself, all I can give you is the way to do it yourself.

When I do that all I see is “main.css”

Hit the refresh button on the browser.

Okay, I tried this just now on my live site, and hit “refresh” and this time under the “Network” tab I am seeing the images in addition to the stylesheet.

img_2501_sm.jpg (80KB)
img_2502_sm.jpg (80KB)
img_2503_sm.jpg (80KB)
img_2504_sm.jpg (80KB)
:
:

See, my naming convention proves that my thumbnails are actually thumbnails!!

But guess what else I am seeing now??

img_2501_med.jpg (500KB)
img_2502_med.jpg (500KB)
img_2503_med.jpg (500KB)
img_2504_med.jpg (500KB)
:
:

That explains a lot!!!

So, @tracknut and @coothead and @Ray.H

How can I fix this problem without having to throw away Coothead’s otherwise awesome coding solution?!

[John_Betong]

@UpstateLeafPeeper

How can I fix this problem without having to throw away Coothead’s otherwise awesome coding solution?!

The experienced delay could be the 464.9 KB audio file is being loaded before all thumbnails have loaded.

The loading order could could be examined if a link to the relevant web pages was available.

[UpstateLeafPeeper]

@John_Betong

The experienced delay could be the 464.9 KB audio file is being loaded before all thumbnails have loaded.

Clearly you haven’t been following this thread… That’s not it.

[John_Betong]

@UpstateLeafPeeper

Clearly you haven’t been following this thread… That’s not it.

Introducing videos has complicated the issue.

File: sp_video-on-modal-edited.html

<!-- Gallery -->
      <ul class="flexGallery">
                 
        <!-- Item #1 -->
        <li id="li1">
          <!-- Gallery Image (thumbnail) -->
          <a class="thumbnail" href="#li1">
            <img src="images/poster.png" title="" alt="">
          </a>
          
          <!-- Video -->
          <div>
            <!-- Menu Items -->
            <a class="closeWindow" href="#containerMast_fixed">Close</a>
            
            <!-- Video -->
            <video controls id="videoFrame">
              <source src="video/test-video.mp4" type="video/mp4">
            </video>
          </div>
        </li>

      </ul><!-- End of .flexGallery -->

From the above script snippet I would have guessed that the images/poster.png would load followed by video/test-video.mp4.

After the previous two files have loaded then the picture thumbnails would load? I would be tempted to try and load the picture thumbnails before the audio file.

[UpstateLeafPeeper]

Read Posts #43 and #44…

[tracknut]

I don’t have an easy answer for you, but as far as I can tell the problem lies here:

.flexGallery li div{
  display: none;
}

in your CSS. display:none does not guarantee that the browser won’t still download the file, it just tells the browser not to actually display it. But this code is using that one line to cause the image to not display until someone clicks on the li, at which point it changes it to display:block and it appears. That all is presumably working, but this issue of all the large images being downloaded anyway, is just not working with this code. My guess is someone good at JS could supply a fix (e.g. only assign the src= attribute after the user has clicked), but that’s not my forte.

[UpstateLeafPeeper]

@tracknut

I don’t have an easy answer for you, but as far as I can tell the problem lies here:

.flexGallery li div{
  display: none;
}

Correct.

@tracknut

in your CSS. display:none does not guarantee that the browser won’t still download the file, it just tells the browser not to actually display it.

Correct. This was one of the few times Coothead was wrong. (I did pose this question back around Christmas.)

Based on my research tonight, CSS only affects the “presentation” and as long as an < img > element has a src then the image gets downloaded.

@tracknut

But this code is using that one line to cause the image to not display until someone clicks on the li, at which point it changes it to display:block and it appears. That all is presumably working, but this issue of all the large images being downloaded anyway, is just not working with this code.

Correct.

@tracknut

My guess is someone good at JS could supply a fix (e.g. only assign the src= attribute after the user has clicked), but that’s not my forte.

Yep, that is the same conclusion/solution I would propose.

Maybe I can get some kind soul to help me in the morning ver in the Javascript forum? (I don’t know a lick of Javascript…)

If/when I get this latest issue resolved, and I resize all of my thumbnails to around 80KB and my detailed photos to around 200KB, I wonder if that is enough to make my site usable?

I am still interested in learning AMP - great suggestion @John_Betong - but that is going to take a while and probably longer than I have for this overdue project.

I really hope I can get some help with the Javascript and it makes things “good enough” for now.

Then maybe I can learn AMP at my leisure and focus it more towards my e-commerce site which I really should be working on now as I type this!!

[John_Betong]

@UpstateLeafPeeper

Read Posts #43 and #44…

Post #43

<li id="li1">
  <!-- Gallery Image (thumbnail) -->
  <a class="thumbnail" href="#li1">
    <img src="$thumbnailSrc/{$thumbnailPhotoValue}" title="" alt="">
  </a>

<div>
  <!-- Menu Items -->
  <a class="closeWindow" href="#containerMast_fixed">Close</a>
            
  <!-- Detailed-Photo -->
  <img src="$detailedSrc/{$detailedPhotoValue}" title="" alt="">
</div>

Exatly how is the above script snippet called because PHP variables are intermingled with HTML script.

Normally it is essential the file has a PHP extension and when calling PHP the following is required:

<!-- Short PHP script -->
<img src="<?= $thumbnailSrc/{$thumbnailPhotoValue} ?>" title="" 
 alt="">

<!-- Long PHP script -->
<img src="<?php echo $thumbnailSrc/{$thumbnailPhotoValue} ?>" title="" 
 alt="">

It appears the snippets would cause problems and the complete script would be helpful.

[UpstateLeafPeeper]

You’re getting into the weeds, @John_Betong…

Because I took out the PHP echo’s for readability in my post, and it should be implied that I would use echoes…

Posts #49 and #50 sum everything up.

[John_Betong]

@UpstateLeafPeeper

Posts #49 and #50 sum everything up.

Perhaps this link would help to solve the JavaScript loading problem.


I have also updated the AMP Demo and think it is a little more simpler.

There is no need to change the URL for either the Localhost or Online images because I have used $_SESSION['HTTP_REFERER']' to automatically select the correct URL.

I have also changed the index.php and separated the menu to show how the $_GET['get']; parameter are used to select different body contents.


I would be grateful for a list of public images that could replace my selected images.

[UpstateLeafPeeper]

@John_Betong,

Did you mean to include an attached ZIP?

All your link does is load a page.

[John_Betong]

Please try post #32 again and open both in a new tab.

I have tested the download and the link, both work ok. Also the online download link works ok.

I just noticed the online web page opens the menu and the highlight index.php source code twice! I will fix it tomorrow because it is very late in the day here.

Edut:

Don’t forget to include links to public images and I will use them on my site… or blur the party images would be even better.

[John_Betong]

Just updated the site reference [Post #32] and it now has three audio tracks:

File: incs/get-logo.php

<?php
declare(strict_types=1);

$aAudios = [
	'video/test-video.mp4',
	'https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3',
	'https://storage.googleapis.com/media-session/sintel/snow-fight.mp3',
];

$songs = '';
foreach($aAudios as $key => $audio) :
	$tmp = <<<  ___EOT
	  <amp-audio 
    	width="88" height="88" 
    	title="Song-00$key"
    	src="{$audio}">
    	<div fallback>
      	Your browser doesn’t support HTML5 audio
    	</div>
  	</amp-audio>
___EOT;
	$songs .= $tmp;
endforeach;


$LOGO = <<< ____EOT
  <div class="fll tac bgg w99 bd1">
    <a class="fll fsl " href="index.php"> 
      Home 
    </a>
    <a 
    	class="flr" 
    	href="https://www.sitepoint.com/community/t/better-load-experience-on-photos/346130"> 
      SP-forum 
    </a>
    <h1> Demo: AmpProject.org  </h1>
   </div>
  <hr class="clb">

  <div class="fss tac">
   	$songs
	</div>  

____EOT;


$FOOTER = <<< ____EOT
  <div id="foot" class="bgg lh2 tac bd2">
    <i class="fll">Wonderful place for a footer</i>
    <a class="flr" href="#">GMF&nbsp;</a>
    Design: John_Betong 3.1.8 
  </div>
____EOT;

  $source = highlight_file('index.php', TRUE);

[UpstateLeafPeeper]

@John_Betong,

Thanks for trying to help. I will be reading up on AMP this weekend. But what I’d really like to get help with first is fixing the Javascript issue. I know the steps needed to fix things, but don’t have the Javascript know-how to make things work.