Skip to main content

Pre load images with Javascript

In all UI Rich web applications, it is very common to pre-load images. General method to do this is to use Javascript. We can load images by creating client side images before page gets loaded. It is a simple technique and can be done with 2 lines of code.

var testImage = new Image();
testImage.src = "test.jpg";

With the above lines of code test.jpg will loaded in the DOM. As the images are cached by browsers, whenever we send a new request for test.jpg, the image will be loaded immediately from cache. With this pre-loading technique there wont be any time lag in getting the image also no display lag for the user. This can be used in the scenarios like displaying image gallery with all the thumbnails loaded on first load of the page, image change on hovering/click of some links.

We can do this preloading in html page using an image tag with height and width set to zero or wrapping the dynamic image in a hidden div. But, advantage with this approach is the imag wont be loaded to the page.
Labels:

Comments

Post a Comment

Popular posts from this blog

Linq: Query for multiple join conditions in Linq to SQL

This is common to join a table with another on multiple conditions, Like Select * from Customer c Join Invoice i on c.CustomerID = i.CustomerID and c.CustomerTypeID = i.CustomerTypeID I need to write a Linq to SQL query for the same scenario. But the syntax for this query is a bit different to expect. The Linq query is as follows: From c in DataContext .Customers Join i in DataContext .Invoices on new { c.CustomerID, c.CustomerTypeID } equals new { i.CustomerID, i.CustomerTypeID } *DataContext in the above query should be replaced with actual datacontext name.
3 comments
Read more

Solution Array for List in WCF

Here is another common problem encounters with WCF Service in initial days. Suppose there is a method which returns a List of Objects the proxy will be generated as method which returns an array of objects. Reason: This problem is due to the default interpretation of collections. While generating proxy for the service all the collections are by default interpreted as arrays. That is why all the lists will be converted to arrays. Solution: If you are generating proxy by adding service reference from visual studio directly, there will be a 'advanced' button. Click that button and select the System.Generic.List as your Collection. This will resolve the problem. If you are generating proxy with svcutil here is the command to do the job. svcutil.exe http://ServerName/ServiceName/Servic.svc?wsdl /collectionType:System.Collections.Generic.List`1 or in short svcutil http://ServerName/ServiceName/Servic.svc?wsdl /ct:System.Collections.Generic.List`1 for more information go through this
1 comment
Read more

How to: show dynamic columns in SQL server Reporting services

How to display dynamic columns in Reports? Let me explain what I mean dynamic here. I have a stored procedure which return some columns depending on User choice. In that case I dont have any clue about the columns which are in the report. In plain english, whatever dataset is coming from database, I need to display that information in a table or matrix. The dataset may contain 2columns or 25 columns. How to achieve this? After so much search I found an interesting property in SQL Server Reporting services for all Fields. There will be a property 'IsMissing' for each Field in the Dataset we defined in the report. To achieve dynamic behavior, I Created a table with all possible columns and toggled the visibility of the columns depending on their IsMissing status. For each column in the table there will be a Visibility Expression set on Hide Property. For Example, say the column is binded to a column 'Name' the details cell will have text Fields!Name.Value. The visibility
2 comments
Read more