Replace images and load once rest of document has been loaded
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)
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
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
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.
加载中,请稍侯......
精彩评论