search

ryanve / response.js

Responsive design toolkit
http://responsejs.com
Other
801 stars 123 forks source link

Image refetched when window is resized #27

Open Jakobud opened 11 years ago

Jakobud commented 11 years ago

I have a weird issue I can't figure out. I have the following code:

<div class='atv tablet' data-r769="<img src='/img/atv.png'/>"></div>

So when my screen width hits 769px, the atv image is loaded into the div. Works perfectly. However I've noticed that if I resize my browser window, making is smaller then wider, then smaller then wider, etc.... each time the 769px breakpoint is hit, the browser loads the file again. However it's cached, so it doesn't actually download it again, but it still tries to fetch it and gets a 304 not modified response:

You can see the atv.png file loaded multiple times from when I was resizing the window back and forth.

I have yet to be able to recreate this problem on jsfiddle and my current code is on a private server. Any clues as to why this would be happening?

Here is my Response code:

Response.create({
    prop: "width",
    prefix: "r",
    breakpoints: [0, 769, 1025]
});
Jakobud commented 11 years ago

Correction: I recreated the problem here:

http://jsfiddle.net/N2Mtj/3/

Simply resize the window back and forth with the Chrome Dev Tools open and you will see it keeps trying to fetch the image.

Is this normal expected behavior? Is this because Responsejs if recreating the image dom element each time? Shouldn't it cache them or something so the browser doesn't keep trying to download the same file?