0

In our app we store HTML in a db table and render that out to the user at a certain point, the HTML can have quite a number of images (that can be large in size) in it, what I would like to do is pre-parse the HTML when we retrieve it from the database and replace any image tags with something that would allow us to load the images once the rest of the data has been presented to the client.

ie. document gets returned and one by one the images get requested and loaded by the client rather than the client having to wait for the entire document and images to load before they see anything.

Is there anything that exists currently, maybe a jquery plugin or similar that offers this kind of functionality?

Our app is an asp.net 3.5 website using Telerik controls (which uses jquery)

Daniel Powell
  • 8,143
  • 11
  • 61
  • 108
  • Might be worth looking at the answers to [Prevent images from loading](http://stackoverflow.com/questions/1667868/prevent-images-from-loading) – Caspar Aug 04 '11 at 06:34

3 Answers3

1

Replace your img src attributes with a "#", and add a custom attribute, something like this:

<img src="#" delayed="http://mydomain.com/myimage.png"/ >

Then, add a javascript line when your page loads that does something like this (untested, but you get the idea):

$('img').each(function(){
  $(this).attr('src', $(this).attr('delayed'));
});

there is also the lazy load plugin.. http://www.appelsiini.net/projects/lazyload

Baz1nga
  • 15,485
  • 3
  • 35
  • 61
  • That kind of approach would work for most people, but will completely fall over if Javascript isn't enabled. – Caspar Aug 04 '11 at 06:31
  • which world are you living in? his app is based on jquery.. hope u realize jquery is a library in JS. and how will you achieve the same otherwise please feel free to give your solution else dont troll. – Baz1nga Aug 04 '11 at 06:35
  • I think Caspar has a valid point as jquery can gracefully degrade if done correctly, however in any case our app does require JS enabled to work correctly – Daniel Powell Aug 04 '11 at 06:38
  • @user350374, yes, I am aware that jQuery is a JS library. My intent was not to troll, but to point out that the solution you advocate in your answer will completely break the page for visitors without Javascript. Daniel is building a pure Javascript app where Javascript is always available and in that case it's perfectly fine, but others stumbling on this page may have different requirements. As for my solution, I've already suggested that Daniel look at another question. I was trying to be helpful, not shooting you down for fun :) – Caspar Aug 04 '11 at 06:47
0

You can do something like this lets say that the html you get from your db is a div and has an id main. Now when you retrieve that div parse it to replace each img tag with a div with class sub. just after the div main ends put a script element like this

<div id="main">
...
...
</div>
<script type=text/javascript ....>  // or use the src attribute to import a js file
....
...
..
</script>

now in the script element write ajax calls to request images and on receiving each image put that image in div with class sub

lovesh
  • 5,235
  • 9
  • 62
  • 93
0

A non javscript way to do this is to use tags everywhere instead of and then add a css file that will set background image to all those s that are images. Thus no js, delay loading.

<body>
  <div id="image1"></div>
  <div id="image2"></div>
  .
  .
  .
  .
</body>
<link href="image.css" type="text/css"></link>

Inside the css you do this:

#image1 { width: 100px; height: 100px; background: url(image1.jpg) }
#image2 { width: 100px; height: 100px; background: url(image2.jpg) }

This will do the lazy loading you are looking for.

oazabir
  • 1,599
  • 9
  • 15