strues/retinajs

JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants

retinajs's Issues

skip svg

I got an email from someone who's using svg in img tags, saying that retina.js tried to swap those. I verified it and pushed up a small fix to my repo. I haven't added tests so I haven't sent a pull request yet.

Check if <img> has width and height attributes before setting them

If images are invisible on the page retina.js will give the replaced versions the dimensions of 0x0.
Fixed it like this:

if (t.el.complete) {
if (parseInt(t.el.getAttribute("width"), 10) > 0) {
t.el.setAttribute("width", t.el.getAttribute("width"));
} else {
t.el.setAttribute("width", t.el.offsetWidth);
}
if (parseInt(t.el.getAttribute("height"), 10) > 0) {
t.el.setAttribute("height", t.el.getAttribute("height"));
} else {
t.el.setAttribute("height", t.el.offsetHeight);
}
t.el.setAttribute("src", e);
} else {
setTimeout(n, 5);
}

syntax issue in less mixin implementation

the provided less mixin breaks the less compiler and spits out css that does not load

This line creates an error:
background-image: url(@path);

.at2x(@path, @w: auto, @h: auto) {
background-image: url(@path);
@at2x_path: ~"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1];

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
background-image: url(@at2x_path);
background-size: @w @h;
}
}

body{
.at2x('site-graphics/leather-bg.jpg',500px,465px);
}

moving the 'url()' into the variable fixes the problem:

.at2x(@path, @w: auto, @h: auto) {
background-image: @path;
@at2x_path: ~"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1];

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
background-image: @at2x_path;
background-size: @w @h;
}
}

body{
.at2x(url('site-graphics/leather-bg.jpg'),500px,465px);
}

@at2x_path not working in LESS mixin

I have been trying to work out why the @2x version file is not being loaded. I have done several limited tests on my end the only way I know how.

If I enter the exact path of the @2x version ([email protected]) in the variable @at2x_path in the mixin it works, so to me that shows that the mixin is working, just not the variable.

I am using the latest release of LESS and testing on iPad3.

Some images not being replaced, work briefly on device rotation

I have a website that i'm currently building that has 2x images for everything.
Certain icons however, aren't being replaced for their 2x versions as expected. They all have 2x version named correctly and everything should be working fine.

Here's the weird thing though: If you rotate the device (i'm using an iPad 3) , the correct 2x image is briefly show, then removed again (putting back the 1x version) after the device rotation as been completed.

All the problematic images displaying this behaviour are in HTML - they're not background images being applied by CSS.

Any ideas on what might be causing this?

iPhone 5 Issues

The script is not functioning when using on the iPhone 5, cross comparison with the iPhone 4S and iPad 3 shows that it does work on those devices. Must be lacking support for the latest iPhone's display (size)?

Broken on servers with mod_pagespeed enabled

mod_pagespeed seems to break this script because it also rewrites the url, apparently last.

It could be something on my end, but I don't know enough about either mod_pagespeed, or js to really know. I'll be looking into it though.

doesn't work in offline mode?

Added the js file and all image files (both retina and non-retina) into the appcache manifest, but in offline mode no replacement occurs. Not sure if this is a bug. Does retinajs require internet connection to work? Thanks

404 Errors in Chrome console

We own a site where users can upload their own pictures which are most likely not in a retina resolution. The problem is, that retina.js throws a 404 for every @2x image which can't be found.

Is there no way to prevent the js from throwing 404s?

Oops...

Looks like my issue has already been discussed, for some reason I didn't find this post before I submitted my own:

#8

Doesnt work with images uploaded in sub-domain?

I've a blog where all my pics are uploaded on the sub-domain, retina.js doesnt seems to fetch the @2x images...

Image part of a form element

Just added to retinajs to our site and started to go through and add high resolution versions of all images. All works fine so far except for one image. I found it was part of a form element:

< input type="image" src="order_now.png" width="290" height="53" name="order_now" value="Order now" >

Should this be working already, or can you add support for this type of image tag?

Trigger Image Change on click (testing!)

Hello! I'd love to be able to test the swapping of the retina images for testing. I'm not JS wizard though. This doesn't work, but is three something similar I could do?

$('.toggle-retina').click(function() {
Retina.init(root);
});

add option to specify which images with a selector

We have set up retina images for two key images on a mobile site - the logo and a contact number graphic.

The client hosts their own website has been enquiring why their logs are filling up with not found errors for all the other retina graphics that the script is checking for.

It seems it would be quite simple to add in an option to do this, by changing this line:

document.getElementsByTagName("img")

to

document.getElementsByClassName(“retina”)

obviously not entirely this simple as you would need to wrap it up into an option but not a major rewrite.

Does it still need to load retina images on the iPhone?

Hi,

Great script but I have a question.

The script works great for iPad and Macbook Pro Retina but isn’t it unnecessary to serve @2x images for iPhone since it compresses the images down anyway?

Serving @2x images on iPhone that sometimes has a slower connection is wasteful.

Issues with Genesis Responsive Slider in Wordpress

I am attempting to implement retina.js on a Wordpress site and everything works great with the exception of the Genesis Responsive Slider. When on a retina display it loads the first image in the slider and then the slider disappears entirely for each subsequent image until it comes back around to the first one. Any ideas?

Fails with status "0" when serving the files locally

Hi,

I'm using retina.js in an iOS application. This application is using UIWebView to show locally stored HTML/PNG files. Both the HTML file and the corresponding PNG files are placed inside my application bundle. The HTML is displayed correctly with 1x images, but the script fails to replace them with 2x images for the new iPad (Retina). Debugging the script shows that b.status is returned as "0".

I'm sure that a lot of people would like to use this script with UIWebView and local HTML/PNG files. So, a solution to this problem would be highly appreciated.

Regards,
Mustafa

offsetWidth/offsetHeight vs width/height

I'm curious about the use of the offsetWidth/offsetHeight attributes versus width/height attributes. In my website it causes the images to appear in the wrong size because it includes the padding values from the original image.

The @2x image appears at width=originalWidth + padding instead of just the width.

Is there a reason for this choice?

Thanks,

Dougal

Doesn't work for dynamically inserted images?

I tried to use retina.js inside a one page js app, the DOM is dynamically generated with JS template.
But it looks like it's not working.
Does retina.js works only on static pages?
Thanks in advance,

Best regards,
Sam

Does not load images hosted on Amazon S3, Cloudfront and other CDNs

The library does not load images hosted on external servers, like Cloudfront.

Please advise, thanks.

Using Retina.js with sprite images

Is it possible to use Retina.js with a sprite image when you specify sprite image location in a css stylesheet? When I think about it it doesn't seem like it's possible.

Multiple instances of the same file should probably be checked only once

When there are multiple instances of the same image on a page, HEAD requests are made for each one. The simple fix would be to push file paths onto an array with each request and only make requests for images not in the array.

Happy to submit a pull request!

Ajax call sometimes returns 200 OK for non-existing images – only on iPhone 4G

Support Bower

Bower is a package manager for the web from Twitter.

Add component.json to project:

{
  "name": "retina",
  "version": "0.0.2",
  "main": "./retina.js"
}

bower register retina git://github.com/imulus/retinajs.git

Don't load default image, only load @2x

Hi, and thank you for your great job.

I've a problem.
I've insert the retina script in my web page.
When in my webpages there are the @2x image on the same folder of the standard image there aren't problem and the script work very well.
But if i don't have the image (@2x) on folder, the script don't show the normal image.

Sample:
FOLDER > image.png + [email protected] (WORKS)
FOLDER > image.png (Don't show the image standard )

There are a solution?

Thank's

Exclude Mobile Devices?

First post on GitHub ever, go easy on me. Is there any easy way to include support for iPads, Macs and larger devices, while EXCLUDING small mobile devices like phones? I have a photography website, and my @2x files are huge. Everything is already high enough resolution for smaller screens. I'd love to avoid the bandwidth strain on small devices, which are likely the site visiting on a cell connection rather than WiFi.

Is it relatively straightforward to simply not allow image replacement on smaller mobile screens?

Missing license

I was packaging retina.js for cdnjs [1] but didn't found any license under which the software is released. Could you please provide one? Also any chance you can tag a release version? This way it would be easier to update. Thanks in advance

[1] https://github.com/cdnjs/cdnjs

Sometimes Doesn't Load @2x Images

I am having an issue where sometimes the retina images aren't being loaded. It shows a blue question mark; as if the image could not be loaded.

This is only happening periodically and if I reload the page a couple of times, this retina image will finally load properly.

Any suggestions?

Doesn't load retina images if browser window starts on a non-retina display but then moved onto a retina display

If I have my browser window on a external non-retina display, retina images will not be loaded. If I move that browser window to a retina display, the retina images should then be loaded. With the current version, this doesn't happen.

Add option for !important

It would be useful in certain circumstances.

Video poster

Could you support HTML5 video posters too?

<img> with CSS border - Wrong dimensions

Guys, I can't fucking believe you didn't notice that if an image has a border defined in CSS, retina.js will increase the image size adding by border size.

So if the image has 100x100px and border 3px, the final size after-retina.js is 103px x 103px and that sucks.

Solution:
Replace
that.el.setAttribute('width', that.el.offsetWidth);
that.el.setAttribute('height', that.el.offsetHeight);

With:
that.el.setAttribute('width', that.el.width);
that.el.setAttribute('height', that.el.height);

Maybe don't wait for onload?

Is there a reason we have to wait for the onload event to check for the 2x files? Couldn't we kick off the ajax requests as soon as we have the filenames instead of waiting for all the images to download?

Retina.js does not work at all

I've tested it on a server after experiencing it not working on localhost, I get no errors whatsoever. Nothing just happens

What if I want to server @2x images by default?

It seems as though this will only work if the coded image is "image.png" and there is a @2x image on server.

What about if I want to serve @2x by default in some parts of my site?

Is there any way to make this work?

Doesn't work with AJAX loaded content

When a content is loaded with AJAX the script doesn't activate. You can see it in action here (it's my company site, no advertising intended): http://nikolaydyankovdesign.com/

The small black & white images on the homepage have retina versions, I checked the filenames. In the inner pages where the content is static it works fine.

I understand it can't know when a content is loaded, but a hook for refreshing the script would work just fine.

Great job with this script, keep it up!

Test out requestAnimationFrame performance

Hi Guys,

This might be a hair brained idea... and just a knee jerk issue post... But I wonder how requestAnimationFrame compares to setTimeout with the task you are performing?

Disclaimer: I don't know too much on the subject.

Alex MacCaw
‏@maccman
"I'm deferring any async rendering needed to requestAnimationFrame - it's so much faster. https://developer.mozilla.org/en/DOM/window.requestAnimationFrame"
Source: https://twitter.com/#!/maccman/status/190244937793671168

Also the pollyfill: "requestAnimationFrame for smart animating"
http://paulirish.com/2011/requestanimationframe-for-smart-animating/

404 pages returned as 200 status code causes blanked images

I've noticed this happens when using hosting such as http://staticloud.com/, because they do not return a proper 404 response when a file isn't found. They instead just return a page indicating that the page could not be found, but the response is 200.

Example '404' page:
http://ciclismo.staticloud.com/kjskldjld

$ curl -I http://ciclismo.staticloud.com/kjskldjld
HTTP/1.1 200 OK
Date: Wed, 22 Aug 2012 17:29:59 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Set-Cookie: sessionid=92035ab79247950b011a4084217e550b; Domain=.staticloud.com; expires=Thu, 22-Aug-2013 17:29:59 GMT; Max-Age=31536000; Path=/
Server: gunicorn/0.12.0
Vary: Cookie
Set-Cookie: sessionid=a2cea44f070eebdf9498e4bee053c87e; Domain=.staticloud.com; expires=Thu, 22-Aug-2013 17:29:59 GMT; Max-Age=31536000; Path=/
Cache-Control: no-cache

Because it returns a 200, retinajs thinks the image is actually there, and tries to load it in, which causes the image to blank out rather than just using the original image.

While not a bug with retina.js, I have a few friends with sites on staticloud and have updated retina.js to check for a proper content-type before loading the @2x image.

Not sure if there is interest in pulling this in, but I'll attach a pull request to gauge interest and to see if there are better ways to work around this.

SASS Wrapper

Would love to see a SASS wrapper. :)

Does retinajs support external trigger of the plugin instead of onload?

As I might have images being loaded and inject into the page dynamically, does retinajs support that or is there an API call that i could trigger retinajs externally ?

Thanks

Using window.onload wipes out any other onload handler previously set by non-retinajs code

retina.js is included as the last thing in the body of the html document, and since it sets a window.onload handler when running in a browser with a retina display, it'll overwrite any existing onload handler set by code that ran earlier.

This is causing me issues since I have javascript code that I'd like to run onload. In my case, I'd like to asynchronously load a google map (see https://developers.google.com/maps/documentation/javascript/tutorial#asynch).

Obviously there are workarounds for this, and that's what I'll use in the meantime, but it would be nice if retina.js didn't overwrite the onload handler.

There are some blog posts out there about alternatives to just blowing away existing onload handlers. See:

http://haacked.com/archive/2006/04/06/StopTheWindow.OnloadMadness.aspx
http://www.dannytalk.com/how-to-handle-multiple-window-events-in-javascript/

Retina.js puts @2x to all images, no matter if the @2x file is found on the server

I ran into a strange issue while implementing retina js.
On my local server environment everything works fine. When i deploy it to the server the script adds @2x at the end of each image name, no matter if the @2x image exists on the server. So in result i get a website which shows only retina images, although the non-retina aren't showing. Any clue what might be the problem here?

CSS3 transitions

Hey guys,

Just noticed that if you're using something similar to the following in your stylesheets the @2x image won't fire:

body, h1, a, img, input { transition:all .4s linear; -o-transition:all .4s linear; -moz-transition:all .4s linear; -webkit-transition:all .4s linear; }

Any ideas on why this happens? I'm assuming it's to do with the reference to img in the line above..

Cross-domain security error for images hosted on others domains

Images hosted on other domains are included in the 2x AJAX checks, triggering a cross-site access error.

Example with spoofed window.devicePixelRatio:

http://www.ravelrumba.com/misc/tests/retina/

Catch the error or should 3rd party images be excluded?

Causes problems with responsive layout

On my website I have images scale appropriately to the dimensions of the window. This results in a different image width on the iPad in portrait vs. landscape orientation. If I load a page up in landscape orientation and rotate, after retina.js does its thing it looks great. If I load the page up in portrait orientation and rotate, after retina.js does its thing the images remain the same size they were in portrait.

I presume this is because the script looks up the image dimensions with offsetWidth and offsetHeight. Is there any way to avoid this problem?

Retina.LESS Doesn't Compile

Hey,

Using the newest version of retina.less does not compile. If I go back to before the extra browsers where added it compiles fine (#13).

Error

ParseError: Syntax Error on line 8 in retina.less:2:5
1 // retina.less
2 // A helper mixin for applying high-resolution background images (http://www.retinajs.com)
3 

This is using the lessc bundler included in the newest repo version.

Not working in Rails 3.2.8 Production

Once Rails 3.2.8 asset pipeline precompiles/minifies Retina.js 0.0.2 and combines it with my other JS files into application.js, Retina.js no longer fires. It works perfectly in development.

Works for example.com but not for www.example.com

I am experiencing this problem on my site, obviously example.com would be replaced with my site's URL.

It's working fine when you visit example.com but if you visit www.example.com it is replacing all of the images even if there isn't an @2x version causing images to be broken.

Deals oddly with some 404s on Chrome

Hi, this page of my blog does not have any retina images available:

http://emptysquare.net/blog/boxing-in-the-basement/

In Firefox on a retina display, retina.js attempts to load the @2x versions and doesn't find them, no problem. On Chrome, however, some of the nine regular images are replaced with broken image icons. On each reload, some random images are replaced w/ the broken icon, some aren't. Chrome Version 24.0.1312.56, Mac OS Mountain Lion.

I don't see any difference in my server's responses to retina.js's queries:

$ curl -I http://emptysquare.net/blog/media/2012/12/[email protected]
HTTP/1.1 404 Not Found
Server: nginx/0.8.54
Date: Wed, 23 Jan 2013 03:11:02 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Content-Length: 69
$ curl -I http://emptysquare.net/blog/media/2012/12/[email protected]
HTTP/1.1 404 Not Found
Server: nginx/0.8.54
Date: Wed, 23 Jan 2013 03:11:28 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Content-Length: 69

... so I don't see why retina.js is incorrectly replacing some of the images with retina versions that don't actually exist.

Add image link support

It would be awesome to be able to use retina.js in combination of lightbox scripts. At the moment this is not possible, because retina.js only affects images themself. The image opened in the dialog should be a nice retina image as well :)