strues / retinajs Goto Github PK
View Code? Open in Web Editor NEWJavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants
Home Page: http://retinajs.com
License: MIT License
JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants
Home Page: http://retinajs.com
License: MIT License
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.
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..
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?
Looks like my issue has already been discussed, for some reason I didn't find this post before I submitted my own:
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/
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.
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?
The library does not load images hosted on external servers, like Cloudfront.
Please advise, thanks.
I've tested it on a server after experiencing it not working on localhost, I get no errors whatsoever. Nothing just happens
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?
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
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.
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/
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!
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);
}
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?
It would be useful in certain circumstances.
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
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?
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);
}
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?
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?
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.
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
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
Would love to see a SASS wrapper. :)
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.
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.
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
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);
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!
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
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);
});
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)?
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.
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 :)
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.
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?
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.
I've a blog where all my pics are uploaded on the sub-domain, retina.js doesnt seems to fetch the @2x images...
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?
Could you support HTML5 video posters too?
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?
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
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.