Geek Answers Handbook

Dynamic generated image is requested twice when using jquery lazy loading in Google Chrome

I have an ashx file handler that generates my images.

<img src="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" />

All of this works great.

Now I want to use lazy loading. Using this jquery lazy loading plugin

So, I adjusted my html images as follows:

 <img src="imageplaceholder.gif" original-data="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" />

And added the following script:

 $(function() { $("img").lazyload(); });

I noticed that on the Network tab of google chrome devoloper tools there are two calls to this file handler.

I created a test script here: link If you scroll down this violin, you will see two image requests when the image is uploaded to Google Chrome. In Firefox and IE, this only works with one call.

Is there any way to avoid this behavior?

UPDATE:

The following headers are set in the file handler:

 [0] "Server" "Microsoft-IIS/7.5" [1] "Set-Cookie" "lang=nl; expires=Tue, 04-Feb-2014 13:08:56 GMT; path=/"

And the Expires property of the Response object:

 context.Response.Expires = 0
+6
source share
2 answers

I believe the main problem is that Chrome does not cache the image. In this demo, Chrome will trigger a new request every time you click a button.

False loading the script launches 2 requests, because first (pre) loads the image into the private img element, then assigns the image URL to the original img element.

I suggest adding the Expires or Cache-Control header and the Last-Modified or ETag to your image handler response so that Chrome caches the image. (For more information on caching, see the Caching Tutorial for Web Authors and Webmasters .)

Update: I suggest adding something similar to this image processor (from MSDN ):

 Response.Cache.SetExpires(DateTime.Now.AddSeconds(60)); Response.Cache.SetCacheability(HttpCacheability.Public); Response.Cache.SetValidUntilExpires(true);
+7
source

Google Chrome seems to handle $("img").attr("src", "") differently than other browsers.

After looking at the source code of the plugin on GitHub and adding a breakpoint in Chrome (step by step), the image handler calls when it changes the src attribute of the image to the original-data value.

Although it is possible that the image processor is a problem (as I noted earlier), the solution I found is to change the line 115 plugin source from

 .attr("src", $self.data(settings.data_attribute));

to

 .attr("src", "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");

the new value is base64 encoded for a transparent 1px by 1px GIF image.

In your fiddle test, find the 2nd occurrence in the mini version

 c.data(h.data_attribute)

and change it to

 "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

It will still ring twice, but the first call will be negligible (0kb?), And this change will not affect other browsers.

+3
source

More articles:


All Articles