Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Finally I get someone with this problem with me:</p> <p><strong>chrome classic - "failed to load resources"</strong></p> <p>This problem drives developer crazy as it can happen <strong>locally</strong>, with small amount of requests and a tiny <strong>PNG</strong> -- however, if you open the image in a new tab, your image will be....finely loaded!</p> <p><strong>Important notice: chrome caching is the most tricky one I experienced - try to disable/bypass the caching of chrome by using the privacy mode or append a random string behind the resources</strong></p> <p><strong>Important notice 2: sometime the network tab of web inspector will make a connection time out - that's why you see the "PENDING" state</strong></p> <p>Solutions/workarounds I tried:</p> <ol> <li>upgrade your chrome to latest one (usually out of luck)</li> <li>use image preload (sometimes it works)</li> <li>use data-uri and put it in another .css file: <a href="http://css-tricks.com/data-uris/" rel="nofollow">http://css-tricks.com/data-uris/</a> </li> </ol> <p>By some formatting (css selector, css rule order and line breaking), with some trial and error, the image loaded again. (this one works magically)</p> <p>I wonder if a specific bit of the origin image jammed the image renderer (as data-uri is not work at the beginning)...but this problem will appear when some CSS style applied for a PNG-backgrounded block - especially when "opacity" involved (or that PNG is a hidden background)</p> <p>Summary:</p> <ol> <li>compress your image in any method</li> <li>change the CSS selector (e.g. apply the background in other element), if it still failed to load, then it is the image problem - try to change some bit of the origin image* or using data-uri (solution 3)</li> <li>change the image loading order if (2) loaded your image - then it will be css selector/ordering problem</li> </ol> <p>*You may not believe after I edited the image, the problem appear / disappear.</p> <p>(If you experiencing long wait time for other images cross browser, it most likely is the performance issue but may be not the bug - some blocking occured)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload