Speed up loading data table with many images

coolshrimp · December 14, 2015

hey so i need some help speeding up my page

currently I have a simple page that reads a .csv file and converts it into a plain table.
then i use the datatables JS (http://datatables.net/) to make it look nice.

issue is each row in the table has an image and the page loads every image each time the page loads even if only a few rows are being shown by the JS.

im listing products and I hotlink to images online so creating thumbnails and linking to them will not work.

Page Thats Slow: http://sale.coolshrimpmodz.com/

Speedtest shows page is 22MB. This is bad for my mobile users.
http://tools.pingdom.com/fpt/#!/bbGziz/http://sale.coolshrimpmodz.com/

Edited December 14, 2015 by coolshrimp

davej · December 14, 2015

im listing products and I hotlink to images online so creating thumbnails and linking to them will not work.

Speedtest shows page is 22MB. This is bad for my mobile users.

Page is 22MB. That is your problem. What do you mean thumbnails would not work? That is the obvious solution.

coolshrimp · December 14, 2015

Page is 22MB. That is your problem. What do you mean thumbnails would not work? That is the obvious solution.

I buy/sell items so i have a simple csv file listing the items and for each item I hotlink to images either found online or on my Photobucket account.

is there something i can do other then downloading each image then Photoshop them to a thumbnail and linking to that thumbnail instead.

the images i currently use for each item in the data table is also same image i have loaded into a modal.

my script currently create the table from csv as well as creates a modal box for each item with the full image.

coolshrimp · December 14, 2015

scripts used on the page

To create Modal boxes each with Unique ID:

<?php
$count = 0;
foreach ($CSVArray as $row) {
	$count++;	
		if ($count > 1 && $row[1] !== "") {	
				
		$id = preg_replace("/[^a-zA-Z0-9]/", "", $row[1]);

echo <<<EOF
<!-- Modal -->
<div class="modal fade" id="$id" tabindex="-1" role="dialog" aria-labelledby="$id">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">{$row[1]}</h4>
      </div>
      <div class="modal-body">
       <table style="width: 100%">
			<tr>
				<td style="text-align:center"><img src="{$row[8]}" width="400" /></td>
				</tr><tr>
				
				<td style="text-align:center" valign="top">
				<table style="width: 100%">
					<tr>
						<td colspan="2" style="padding:10px;width: 50%; font-size: x-large; text-align: center; color:purple;" valign="top"><strong>{$row[2]}</strong></td>					
					</tr>

					<tr>
						<td style="padding:10px" valign="top" >{$row[4]}<br /></td>						
					</tr>
										
					<tr>						
						<td style="padding:10px" valign="top" >{$row[6]}<br /></td>
					</tr>
					
				</table>				
				</td>
			</tr>
		</table>      </div>
      <div class="modal-footer">
        <div style="float:left; padding-top:5px; font-weight: bold;">{$row[0]} Available</div>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


EOF;
	}
}
?>

Script to create the table each row links to unique Modal popup:

<table style="margin: 8px; width: 98%">	
	<tr>
		<td>
		<br />

		<strong>
		<?php 		
		$numRows = 0;
			$count = 0;
			foreach ($CSVArray as $row) {
				$count++;	
				if ($count > 1 && $row[1] !== "") {
				$numRows++;
				}
			}
		echo $numRows; 
		echo " Items Total"; 
		?>
		</strong>		
		<br />
		<br />
		<br />
		</td>
	</tr>
	<tr>
		<td>
		<table id="itemslist" class="order-table table table-hover table-striped">
		<thead>
        <tr>
            <th>Image</th>    
            <th>Info</th>
            <th>Price</th>          
        </tr>
    	</thead>
		<tbody>	
<?php
$count = 0;
foreach ($CSVArray as $row) {
	$count++;	
		if ($count > 1 && $row[1] !== "") {		
			
		$id = preg_replace("/[^a-zA-Z0-9]/", "", $row[1]);
		
echo <<<EOF
<tr data-toggle="modal" data-id="1" data-target="#$id">
				<td style="width: 25%"><img src="{$row[8]}" width="200" /></td>
				<td>
				<table style="width: 100%">
					<tr>
						<td valign="top" style="font-size: large; height: 25px;">
						<strong>{$row[1]}</strong></td>
					</tr>
					<tr>
						<td style="width: 33%" valign="top">{$row[0]} Available</td>												
					</tr>
					<tr>
						<td valign="top"><br />{$row[4]}<br /><br /></td>
					</tr>
					<tr>
						<td style="height: 20px;" valign="top" colspan="3">{$row[6]}<br /><br /></td>
					</tr>
				</table>
				</td>
				<td><span style="width: 33%; font-size: x-large; text-align: center; color:purple;" valign="top"><strong>{$row[2]}</strong></span></td>
</tr>
EOF;
}
}
?>
		 	</tbody>
		 </table>
		</td>
	</tr>
</table>

Example of CSV Data:

Edited December 14, 2015 by coolshrimp

davej · December 14, 2015

You load 174 products with full images on one page?

dsonesuk · December 14, 2015

Hotlinking is not going to help either, i should place imges on own domain in a specific folder, you can then use server-side language to create a thumbnail if one does not exist already and place '_thumb' before extension so original 'myimage.png' becomes 'myimage_thumb.jpg', then it would just the matter of changing/removing '_thumb' and extension to access original file.

coolshrimp · December 14, 2015

ok so for one i figured pre generating all modals is not efficient so i have created a single modal what gets the content set dynamically from link i click but i cannot get it working any one see the issue?

Modal code:

<div id="modalFullInfo" class="modal fade" role="dialog" tabindex="-1">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-label="Close" class="close" data-dismiss="modal" type="button">
				<span aria-hidden="true">×</span></button>
				<h4 id="myModalLabel" class="modal-title">Modal Title</h4>
			</div>
			<div class="modal-body">
				<table style="width: 100%">
					<tr>
						<td style="text-align: center">
						<img id="FullImage" src="#" width="400" /></td>
					</tr>
					<tr>
						<td style="text-align: center" valign="top">
						<table style="width: 100%">
							<tr>
								<td colspan="2" style="padding: 10px; width: 50%; font-size: x-large; text-align: center; color: purple;" valign="top">
								<strong id="FullPrice">Price</strong></td>
							</tr>
							<tr>
								<td id="FullInfo" style="padding: 10px" valign="top">
								Info<br />
								</td>
							</tr>
							<tr>
								<td id="FullIncludes" style="padding: 10px" valign="top">
								Includes<br />
								</td>
							</tr>
						</table>
						</td>
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<div style="float: left; padding-top: 5px; font-weight: bold;">
					<span id="FullCount">00</span> Available</div>
				<button class="btn btn-primary" data-dismiss="modal" type="button">
				Close</button></div>
		</div>
	</div>
</div>

Link with Data-fields set:

<tr data-toggle="modal" data-id="$id" data-target="#modalFullInfo" data-FullName='$row[1]' data-fullimage="$row[8]" data-fullprice="$row[2]" data-fullinfo='$row[4]' data-fullincludes='$row[6]' data-fullcount="$row[0]">
				<td style="width: 25%"><img src="{$row[8]}" width="200" /></td>
				<td>
				<table style="width: 100%">
					<tr>
						<td valign="top" style="font-size: large; height: 25px;">
						<strong>{$row[1]}</strong></td>
					</tr>
					<tr>
						<td style="width: 33%" valign="top">{$row[0]} Available</td>												
					</tr>
					<tr>
						<td valign="top"><br />{$row[4]}<br /><br /></td>
					</tr>
					<tr>
						<td style="height: 20px;" valign="top" colspan="3">{$row[6]}<br /><br /></td>
					</tr>
				</table>
				</td>
				<td><span style="width: 33%; font-size: x-large; text-align: center; color:purple;" valign="top"><strong>{$row[2]}</strong></span></td>
</tr>

so the TR opens modal on click and the data fields are generated:

<tr data-toggle="modal" data-id="$id" data-target="#modalFullInfo" data-FullName='$row[1]' data-fullimage="$row[8]" data-fullprice="$row[2]" data-fullinfo='$row[4]' data-fullincludes='$row[6]' data-fullcount="$row[0]">

JS it would change the modal content (Not working):

$(document).ready(function () {
	$('#modalFullInfo').on('show.bs.modal', function (event) { // id of the modal with event
	  var link = $(event.relatedTarget); // link that triggered the modal
	  
	  // Extract info from data-* attributes
	  var fullname = link.data('fullname');
	  var fullimage = link.data('fullimage');
	  var fullprice = link.data('fullprice');
	  var fullinfo = link.data('fullinfo');
	  var fullincludes = link.data('fullincludes');
	  var fullcount = link.data('fullcount');
	  
	  // Update the modal's content.
	  var modal = $(this);
	  modal.find('.modal-title').text(fullname);
	  modal.find('#fullimage').attr("src", fullimage);
	  modal.find('#fullprice').text(fullprice);
	  modal.find('#fullinfo').text(fullinfo);
	  modal.find('#fullincludes').text(fullincludes);
	  modal.find('#fullcount').text(fullcount);
	})
})

So any suggestions what i'm missing the data info is there and the modal pops up on click but content does not change.

Edited December 14, 2015 by coolshrimp

coolshrimp · December 14, 2015

You load 174 products with full images on one page?

yes well there resized to a max width but yes there hotlinked to full size images.

im looking to know is there some kind of script i can use that will reduce images automatically

im thinking i may have to make a PHP script to grab remote images into a folder and to rename them and then resize to thumbnail as well and save it and then i setup page to load them.

Edited December 14, 2015 by coolshrimp

davej · December 14, 2015

Single-step through the Javascript using the browser debugger.

justsomeguy · December 14, 2015

You should write a PHP script to import the CSV file and set up the products in a local database, which will also download the remote images and save them locally, and make a thumbnail in the process. You should also use ajax to load the next or previous page of results instead of printing everything on the page and using Javascript to handle paging.

dsonesuk · December 14, 2015

I have a thumbnail script, but its to much to hack around for your needs, so checkout

http://www.webgeekly.com/tutorials/php/how-to-create-an-image-thumbnail-on-the-fly-using-php/

Edited December 14, 2015 by dsonesuk

coolshrimp · December 14, 2015

You should write a PHP script to import the CSV file and set up the products in a local database, which will also download the remote images and save them locally, and make a thumbnail in the process. You should also use ajax to load the next or previous page of results instead of printing everything on the page and using Javascript to handle paging.

well what i do is i have a google doc setup then can be edited easily on the fly.

simply add a new row and link an image in the image column.

I have it publish to web as .csv file that the page reads on load.

not sure how the Ajax works. can it be styled and work exactly like that i have now with JS?

davej · December 14, 2015

AJAX means loading content only on request.

coolshrimp · December 14, 2015

I have a thumbnail script, but its to much to hack around for your needs, so checkout

http://www.webgeekly.com/tutorials/php/how-to-create-an-image-thumbnail-on-the-fly-using-php/

ok so i used ur thumbnail script it works but now page takes 30sec to load but only 1MB in size

http://tools.pingdom.com/fpt/#!/bF3dpL/http://sale.coolshrimpmodz.com/

davej · December 14, 2015

ok so i used ur thumbnail script it works but now page takes 30sec to load but only 1MB in size

Yeah, the thumbnail generator should only run if the thumbnail file doesn't exist.

dsonesuk · December 14, 2015

Yes! My other script uses original file name removes dot and ext and replaces with '_thumb' dot and extension, then checks if this thumbnail file exists in thumbnail folder, if yes then ignore, if no run script to create thumbnail, so the initial creating of thumbnails will take longer, but after that the thumbnail script will be bypassed, unless new image/s added.

NOTE: mine looks at all files in folder to a set valid image extension, then loops through each one, creating thumbnail in separate thumbnail folder, IF it does not already exist, so it is different to link i supplied where you use $_GET[] etc, but the rest to create thumbnail is more or less the same as mine, which is the most important part for you to use, to write your own version.

Edited December 14, 2015 by dsonesuk

justsomeguy · December 15, 2015

well what i do is i have a google doc setup then can be edited easily on the fly.

simply add a new row and link an image in the image column.

I have it publish to web as .csv file that the page reads on load.

OK, so, what's your goal? Is your goal to have everything edited easily on the fly, or to work well? If your priority is to have everything easy to edit then you've already finished. If you want it to work well then you have to change your design.

coolshrimp · December 15, 2015

OK, so, what's your goal? Is your goal to have everything edited easily on the fly, or to work well? If your priority is to have everything easy to edit then you've already finished. If you want it to work well then you have to change your design.

seems i have almost got it.

i got the modal windows to be created dynamically. so images don't load until user pops up the modal and then it grabs the single full size image and info into the modal box.

Sends data to the modal on open is this OK to do? am i using it correctly?

//Show the modal
<a data-toggle="modal" data-id="$id" data-target="#modalFullInfo" data-FullName='$row[1]' data-fullimage="$row[8]" data-fullprice="$row[2]" data-fullinfo='$row[4]' data-fullincludes='$row[6]' data-fullcount="$row[0]">Show Modal</a>

//Modal JS
<script>
$(document).ready(function () {
    $('#modalFullInfo').on('show.bs.modal', function (event) { // id of the modal with event
      var link = $(event.relatedTarget); // link that triggered the modal
      
      // Extract info from data-* attributes
      var fullname = link.data('fullname');
      var fullimage = link.data('fullimage');
      var fullprice = link.data('fullprice');
      var fullinfo = link.data('fullinfo');
      var fullincludes = link.data('fullincludes');
      var fullcount = link.data('fullcount');
      
      // Update the modal's content.
      var modal = $(this);
      modal.find('.modal-title').html(fullname);
      modal.find('#fullimage').attr("src", fullimage);
      modal.find('#fullprice').html(fullprice);
      modal.find('#fullinfo').html(fullinfo);
      modal.find('#fullincludes').html(fullincludes);
      modal.find('#fullcount').html(fullcount);
    })
})
</script>



<!-- Modal -->
<div id="modalFullInfo" class="modal fade" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                <span aria-hidden="true">×</span></button>
                <h4 id="myModalLabel" class="modal-title">Modal Title</h4>
            </div>
            <div class="modal-body">
                <table style="width: 100%">
                    <tr>
                        <td style="text-align: center">
                        <img id="fullimage" src="#" width="400" style="max-height:450px" /></td>
                    </tr>
                    <tr>
                        <td style="text-align: center" valign="top">
                        <table style="width: 100%">
                            <tr>
                                <td colspan="2" style="padding: 10px; width: 50%; font-size: x-large; text-align: center; color: purple;" valign="top">
                                <strong id="fullprice">Price</strong></td>
                            </tr>
                            <tr>
                                <td id="fullinfo" style="padding: 10px" valign="top">
                                Info<br />
                                </td>
                            </tr>
                            <tr>
                                <td id="fullincludes" style="padding: 10px" valign="top">
                                Includes<br />
                                </td>
                            </tr>
                        </table>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <div style="float: left; padding-top: 5px; font-weight: bold;">
                    <span id="fullcount">00</span> Available</div>
                <button class="btn btn-primary" data-dismiss="modal" type="button">
                Close</button></div>
        </div>
    </div>
</div>

So now my only issue the thumbnail.php on the fly works great except for my photo bucket images seems to be because there large resolution.

I upload directly from my phone to photobucket and then link image. I don't want to have to shrink image before uploading can i change the script to allow larger resolution?

I'm using script you recommended above. you can see below images that don't thumbnail.

Error: Cannot create new JPEG image

Original:

http://sale.coolshrimpmodz.com/

Thumbnail Script:

http://sale.coolshrimpmodz.com/index_test.html

dsonesuk · December 15, 2015

It could be to do default compression/quality level try from original script

imagejpeg($img);

to

imagejpeg($img, NULL, 100); //NULL is used for when no path including filename is provided to save thumbnail to, so so you can set compression/quality level

dsonesuk · December 15, 2015

You should rethink this, the modal image is 1000px by 600+ px scalled down to 400 x 250

You should create medium sizes images to around 400px width for modal image, as well as the thumbnails.

You should have image folders each for medium and thumbnail images, get image filename from wherever check if images exist in medium and thumbnail folder, if not! create the with script and place in respective folders and src those instead,

coolshrimp · December 15, 2015

You should rethink this, the modal image is 1000px by 600+ px scalled down to 400 x 250

You should create medium sizes images to around 400px width for modal image, as well as the thumbnails.

You should have image folders each for medium and thumbnail images, get image filename from wherever check if images exist in medium and thumbnail folder, if not! create the with script and place in respective folders and src those instead,

because my items change daily its not worth the effort of creating folders. and making multiple thumbnails and sizes so if i can get a script to do that automatically great.

Items also get removed daily as well so i don't want to have a folder full of old cached images as the folder will get big fairly quick.

needs to be simple to manage, Upload image to photobucket, add new row in spreadsheet and link to image.

simple as that.

dsonesuk · December 15, 2015

So in this excel spreadsheet it has listing of all current images used right! or the listing of items must be controlled on whats displayed right! then what's stopping you removing the images of items not shown or listed automatically as well, a simple option to use boolean to say this item is no longer available so remove.

ALSO as simple as that!

coolshrimp · December 15, 2015

yes so here is a sample of the spreadsheet.
I read from it as a csv file.

So the image is linked to either from some website or an actual image uploaded to photobucket.
only issue is right now the script cannot make Thumb for some of my images i have to get that fixed.
Tried what you said and did not make a difference. tinkling i may have to use (imagemagick) and not (GD) just have to figure out how to do that now.

before i go into the caching images and auto storing and removing. im guessing id have to run a cron job to check csv for list of images and compare to what is in folder?
and if there missing create them and if not delete them. then its not generating image each time user loads page i can link directly to thumbs generated with Name in the folder.

coolshrimp · December 15, 2015

humm seems its only photobucket images with the issue.

 imagecreatefromjpeg(http://i102.photobucket.com/albums/m102/coolshrimp/For Sale/5050CA66-D198-464E-892B-6BFACCD49FBF.jpg): failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request

i uploaded same image to another site and it had no problems at same resolutions.
maybe its there way of blocking hot-linking? anyway around this? weird that it can load fine but php cant open it.

http://i102.photobucket.com/albums/m102/coolshrimp/For Sale/5050CA66-D198-464E-892B-6BFACCD49FBF.jpg

Edited December 15, 2015 by coolshrimp

justsomeguy · December 15, 2015

It's not blocking hotlinking, it's blocking requests that it thinks are automated. It is against their terms to scrape their site. They have an API you can use though.

Speed up loading data table with many images

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in