Images loaded twice

[MattJones]

I'm running an embedded docViewer that pulls images from Rails. I put a debug output statement in the image-return controller action. On first load, it reports just one request for each of the first 3 pages. Each page loaded after that generates 2 requests and gets 2 full responses from rails. One request is coming from DV/lib/page.js#drawImage.js, but I don't know where the other comes from. The page doesn't load until the second request completes.

Is this behavior intended? Is there a way to limit it to a single request?

[knowtheory]

Hey Matt, is this something you're only seeing in your rails logs, or do you also see two get requests in the chrome/firefox/safari inspectors too?

[MattJones]

Hi Ted,

Thanks for your response. I'm seeing it twice in my rails logs and in the
chrome network console.

I've been playing around with it, and noticed that the image doesn't update
until the second request completes. I tweaked rails to respond with a 500
error for a duplicate request, and the resulting error came from a jquery
source. I tracked the stack trace back, and that call that failed
originated from the call to replaceWith in lib/page.js#drawImage. That
makes me think this might be from my newer jquery (1.7.2) versions
interfering with the jquery version included with documentViewer (1.5.1).

-Matt

On Tue, Mar 26, 2013 at 4:22 PM, Ted Han notifications@github.com wrote:

Hey Matt, is this something you're only seeing in your rails logs, or do
you also see two get requests in the chrome/firefox/safari inspectors too?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/26#issuecomment-15485987
.

Matthew Jones
Software Engineer
logik.com
(703) 785-6702 (mobile)
(202) 250-3686 (office)
(800) 951-5507 (toll free)

NEW! We've moved! Our freshly designed office is at 1400 I Street NW Suite
800, Washington DC 20005. Please update your records and by all means swing
in for a visit.

[brentroady]

This seems to only occur in Chrome. In lib/page.js#loadImage, the line

preloader[0].src = src;

sets the src on the img tag and causes the browser to make a request to load the image. The preloader load event handler then calls drawImage, which has

this.pageImageEl.replaceWith('<img width="'+this.model_pages.width+'" height="'+imageHeight+'" class="DV-pageImage" src="'+imageURL+'" />');

In Chrome this causes another request to be sent. A second request was not sent in Firefox or IE.

For most people with static images, the web server probably handles this second request with a 304 response. I am generating images dynamically, so I added code to explicitly handle this.

[MattJones]

@brentroady: I'm dynamically generating the images as well. Can you post a sample of your code for how you handled the double request?

[brentroady]

My server code is in Asp.Net MVC instead of Rails, but it can probably be translated pretty easily.

var lastModified = DateTime.Now.ToUniversalTime();
var modifiedSince = Request.Headers["If-Modified-Since"];
if (!string.IsNullOrEmpty(modifiedSince))
{
    DateTime modifiedSinceDate;
    try
    {
        modifiedSinceDate = DateTime.Parse(modifiedSince).ToUniversalTime();
        if ((lastModified - modifiedSinceDate) <= TimeSpan.FromSeconds(60)) // Cache for 60 seconds
        {
            return new HttpStatusCodeResult((int)System.Net.HttpStatusCode.NotModified);
        }
    }
    catch (Exception) { }
}

Response.AddHeader("Last-Modified", lastModified.ToString("R"));
// Code to generate and return image here

Comparing the If-Modified-Since header in the request to the current datetime and returning a 304 if older than a certain elapsed time. Then setting the Last-Modified response header for when generating the image. Hope this helps!