Large collection of images stored in Literal not loading in IE or FireFox?

[Joergen Bech]

Hope anyone can help me.

I have an aspx page which needs to display a huge (400+) list of
addresses + logos.

I am using a StringBuilder object to which I add each address.
Each address is turned into a table with two columns.

When the whole list has been built, I stuff the result into a Literal
on the aspx page. This operation takes place as the result of
clicking a System.Web.UI.WebControls.Button instance.

Trouble is, the images are not loading when the page is being served.
The resulting html is only a maximum of 160K. There are about 280
images totalling 1.4MB. Or rather: If I am lucky, a few images will
load, but often none will.

All image paths are relative. All images are valid gifs. The page
validates just fine with CSE HTML Validator 8.04 Lite.

If I do the "View Source" thing in IE, save the file to a html file,
then launch that file, all images load just fine.

Below, you can see a snippet of the html being generated to the
end user. Still running locally, so I cannot provide a public URL
at this time.

Any ideas?

TIA,

Joergen Bech

---snip---
<hr>
<table border="0">
<tr>
<td class="VBclass" width="400">
<strong>Basement Reklame &amp; Marketing</strong><br />
Grejsdalsvej 4<br />
7100 Vejle<br />
Tlf 75843400<br />

<a href="http://www.basement.dk">www.basement.dk</a><br />
</td>
<td class="VBclass" width="250">
<img src="Sponsors/Logos/Basement.gif" alt="" border="0">
</td>
</tr>
</table>
<br />
<hr>
<table border="0">
<tr>

<td class="VBclass" width="400">
<strong>Bauhaus Danmark A/S</strong><br />
Anelystparken 16, Tilst<br />
8381 Tilst<br />
Tlf 87450500<br />
<a href="http://www.bauhaus.dk">www.bauhaus.dk</a><br />
</td>
<td class="VBclass" width="250">
<img src="Sponsors/Logos/BauhausTheHomeStore.gif" alt="" border="0">

</td>
</tr>
</table>
<br />
<hr>
<table border="0">
<tr>
<td class="VBclass" width="400">
<strong>Baungaard Advokatfirma</strong><br />
Bredgade 31<br />
7160 Tørring<br />

Tlf 75800200<br />
</td>
<td class="VBclass" width="250">
<img src="Sponsors/Logos/BaungaardAdvokatfirma.gif" alt="" border="0">
</td>
</tr>
</table>
<br />
<hr>

 

[Nathan Sokalski]

First of all, where are you getting the data from? If it is from a database
or XML file (one of which I would assume is the case, considering the number
you are displaying), I would suggest using one of the data controls, such as
the DataList or Repeater. Another thing I think you should take into account
is that 400 images will not load instantly, even on a fast connection, and
do your users really want to scroll through 400 images on the same page? I
might suggest using a paging method to display only X number of
addresses/logos per page. This will decrease the load time of the page.
Also, if it is possible (I haven't seen the design of your page, so it may
not be appropriate), I would suggest having some type of search technique
available so that it is not necessary to display all images. But regardless
of what you do, displaying 400 images on one page will never be efficient or
fast at this point in technology.

 

[Joergen Bech]

The data is stored in an xml file but resides in memory at the time
the request is made.

400 is a maximum, in case the user does not filter by anything.
At 400, the html is only 160K and the (text) result appears near-
instantaneously. If the user wants to subsequently wait for
400 tiny images to load, that's fine.

There are reasons why we want them to appear in one, long
page rather than using the paged approach, but the paged
approach is not the answer to my problem: The problem occurs
even if only 3 results are displayed.

Why do you think generating the html using the repeater
method will solve the problem with images not showing up?
Forget the 400 images. Suppose the search result is only
5 records: What in that case would technically be wrong with
my solution?

Regards,

Joergen Bech

 

[Nick Chan]

Hi might be something to do with buffer/response header settings

u might want to try to use javascript to write those htmls
store the data in javascript arrays and draw them with document.write
saves bandwidth.

are you testing this page using non-server version of IIS? that might
be the 'problem' also. because like VS's development webserver, it has
limits

 

[Nathan Sokalski]

Did you try looking at the generated source code? Make sure the <img> tag's
src attribute really does point to the desired location. Also, see if you
can view one of the images by entering the url for the image in the browser
to make sure the image files are not the problem. Last of all, try manually
writing a simple static html file that has the same src attribute as any one
of the <img> tags in the html generated by your application. We may also be
able to help you more if we could see your code.

 

[Joergen Bech]

As I wrote in my original post, this is exactly what I did - and the
images and relative references are just fine.

Using View Source -> Save As..., writing an html file, then launching
that static file, all images show up as expected.

Regards,

Joergen Bech

 

[Joergen Bech]

Spooky update:

The img reference is written using this line:

Dim simg As String = "<img src=""Sponsors/Logos/" &
si.Logo & """ align=""middle"" alt="""" border=""0"">" & nl
sb.Append(simg)

I created a new bare-bones project with just a single button
and a single literal on the form, then copied the images from
the Sponsors/Logos folder of the original project to an "Images"
subfolder of the new project. I then copied enough code to
generate the table layout bloat produced by the original project.

Everything worked?!?

I then proceeded to remove all differences between the test
project and the original project from the original project. Still no
dice.

I then thought: Ok, in the test project the images are stored in
a subfolder and in the main project in a subfolder of a subfolder.
After changing "Sponsors/Logos" to "Images" in the original
project, everything worked. I then proceeded to try out various
names for the subfolders:

"Sponsors/Logos" - no
"Images" - yes!!!
"Sponsor" - no
"Sponso" - yes!!!
"Logos/Sponsors" - no
"Sponsorss" - yes!!!
"Sponsor2" - yes!!!

And yes, in each instance I made sure that the folder names
matched what was produced by the code.

Ok, I have a class named "Sponsor" in my project and I have
not tried renaming it, but that should not have anything to do
with anything(?)

I tried changing the "Images" folder in the test project to
"Sponsor/Logos" (and the code to match, of course) - and
now the test project does not work?!?

The most likely explanation would be that I made a mistake in
my code, but 1) the image references work when the html page
is saved and launched as a static page, and 2) I moved back and
forth several times, changing folder names and code to match, and
I would not be likely to make the same typo twice. The test results
were consistent.

At this point, I can just select a folder name that works and forget
about it, but if any of this rings a bell, please let me know.

Regards,

Joergen Bech