Image Slideshow with SEO

June 16th, 2008 Filed Under Good to know, Javascript, Thinking Out Loud, Tips & Tricks, gyan, snippet

I was doing some experiment with dhtml slideshow a couple of weeks back. Then someone said that all the images should be trackable by search engines(i.e., the image urls should be written on the html page) so that the crawlers can crawl them. The biggest challenge was the load time of all the images and the user experience.Then I applied a trick to overcome the problem. Which pretty much solves my problem and doesn’t shoot up the loading time.

The algorithm goes something like this:

1) Write the image src on the page.
2) Just after the image tag is written on the page with its source, change the image src to nothing.
3) While src is changed, store the original src in some collection for using it for slideshow purpose.

And it works pretty well in both IE and FF.

The code goes like this:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
    <head>
        <title> new document </title>
        <script type="text/javascript">
            function addToSS()
            {
                var obj = document.images[document.images.length-1];
                obj.style.display = 'none';
                var temp = obj.src;
                obj.src="";
                slideShow.imgArr[slideShow.imgArr.length]=temp;
            }
        </script>
    </head>
    <body>
        <img src="img/simpson1.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson2.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson3.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson4.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson5.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson6.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson7.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson8.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson9.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson10.jpg" class="hide"/>
        <script>addToSS();</script>
    </body>
</html>

So whenever next you consider making an image slideshow, please visit this article for reference in case you just forget this trick. Bookmark it please.

Post Linx
Permalink | Trackback | | Print This Article |

Comments

Leave a Reply

Links

Recent Posts

Categories

Archives

Meta

AOL Horoscope

Image Slideshow with SEO

Comments