Add a tool or reference to test browser preloader.

[baamenabar]

Much has been talked about the browser preloader, but very little has been written on how to test for it.

ResponsiveImagesCG/picture-element#7

ResponsiveImagesCG/picture-element#9

Is there a tool to do so?
Is there a method to test for preloaded assets?

[yoavweiss]

That highly depends on what it is you're trying to test.

My current methods to test if resources are preloaded are either based on visually looking at the network tab in the dev tools, or relying on the browser's internal APIs that expose that info.

I guess that resourceTimingAPI can be hacked to extract that info, in case you're looking at a specific scenario (e.g. in that scenario, is X was downloaded before Y, that means X was preloaded).

What exactly are you trying to test?

[baamenabar]

Thanks Yoav for the fast reply.

Just today it came to conversation this article: http://lynn.ru/examples/svg/en.html
which proposes a fallback for svg, but I figured chrome would load both assets because it would try to load the src within before it evaluated it was inside a tag and figure out it't not valid.

I made a codepen http://codepen.io/baamenabar/full/kGoLD and it works as expected and loads just the SVG, but don't know how to triger the preloader without actually loading the page to see which asset is preloaded, if any.

I use Charles to monitor the http requests.

This problem usually shows up when talking about <picture> fallback techniques, but right now I don't remember one.

Personally, I think the preloader related issues are the biggest obstacle has, so reliably testing solutions is great help. Technical obstacles that is.

[yoavweiss]

Specifically for that issue, here's how I tested it:
https://twitter.com/yoavweiss/status/369187835040899072

Chrome doesn't preload the src there since:

• Blink's preloader doesn't handle 'image'
• 'image'=>'img' aliasing happens when the DOM tree is built, which is
  after the tokens are passed to the preloader

Going back to the general issue, preloaded tests usually require building a
specific test case. I'll try to think about a resourcetiming generic hack
On Aug 20, 2013 7:38 PM, "Agustín Amenabar" notifications@github.com
wrote:

Thanks Yoav for the fast reply.

Just today it came to conversation this article:
http://lynn.ru/examples/svg/en.html
which proposes a fallback for svg, but I figured chrome would load both
assets because it would try to load the src within before it evaluated it
was inside a tag and figure out it't not valid.

I made a codepen http://codepen.io/baamenabar/full/kGoLD and it works as
expected and loads just the SVG, but don't know how to triger the preloader
without actually loading the page to see which asset is preloaded, if any.

I use Charles to monitor the http requests.

This problem usually shows up when talking about fallbacktechniques, but right now I don't remember one.

Personally, I think the preloader related issues are the biggest obstacle
has, so reliably testing solutions is great help. Technical obstacles that
is.

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

[baamenabar]

OH! thanks, guess this isn't very straightforward, seems your proposed hack would be lovely to have around.

This gives me an idea... posting it now on other issue, much more relevant.

ResponsiveImagesCG/picture-element#5 (comment)

And is there is yet another example where a preloader tester would be helpful.

[marcoscaceres]

Closing.