Comments (9)
Hi Karl,
First of all, I really appreciate all the replies you added to some of the other open issues. Big thanks on that!
Moving on to the "retina" issue. When I first made this code available, there wasn't an option to define a data-src-retina
. I added it later on because it seemed like a good idea and it would actually be helpful for the simplest use-cases. I was aware that the possibility to load a second image src wouldn't solve all the issues of a fully responsive layout but I added the "feature" anyway.
I kinda regret doing that now since, just like you said, most of the times you don't really want the retina alone to dictate what image should be loaded, the screen size is equally important to make that decision. Unveil definitely never aimed to solved this problem well.
That said I think making Unveil more flexible wouldn't be that hard but I'm not sure if agree with the way interchange is solving the problem.
There's just too much configuration going on. The data-interchange
attribute is basically holding an array of arrays and all of these is being rendered in the DOM where I think it doesn't belong. I believe we can have the same functionality in a much simpler way.
What I have in mind is adding an option where people can pass a function and decide themselves where to look for the most appropriate src path for the image. And example of what that could look like:
$("img").unveil({
dataFilter: function(image) {
var dataAttr;
if (matchMedia("(min-width: 768px)").matches) {
dataAttr = "data-src-something";
} else if (matchMedia("(min-width: 1280px)").matches) {
dataAttr = "data-src-something-else";
}
return image.getAttribute(dataAttr);
}
})
I think this is a better approach. I prefer it because it pushes all the responsibility for choosing the right data-src
to the user. This way:
- The plugin gets a lot more flexible.
- We manage to keep it almost as simple as it is now.
- We only need to store the src paths in the DOM.
But lets hear what people say first. I'd definitely like to hear some feedback.
from unveil.
Thanks for the comprehensive reply Luis -
After some thought, I can live with that solution!
At first glance, I thought there was a flaw, as a group of pre-defined dataFilters may be appropriate for one section of unveiled images, but perhaps not so much for another. However, it occurred to me that this is still flexible because the various data-src-attributes can be populated on a per-section basis. In my case, I would likely create 3 dataAttributes data-src-small-retina, data-src-large-retina in addition to the default data-src. In some sections of my layout, the data-src-small-retina image would be the same as the data-src image (responsive image), in other sections, the data-src-small-retina image would be the same as the data-src-large-retina image (collapsing columnized thumbnails). It is rare I would need to use more than 2 image sizes, but I would still need 3 attributes to select them appropriately for separate sections.
Some high-traffic websites like newspapers might even want to add data-src-small for low-res non-retina mobile devices, just so images load very quickly at minimal bandwidth consumption.
I would suggest you still keep data-src as native default fallback for two cases:
- If dataAttr does not get assigned in the dataFilter function, value would automatically default to data-src.
- If a matched src attribute for a specific img element does not exist, it should default to data-src.
Another thing to mention, is the device-pixel-ratio media query. Because of all the vendor-prefixes for min-device-pixel-ratio, it would probably be better to use a native javascript method window.devicePixelRatio. I would probably populate my default function like this:
$("img").unveil({
dataFilter: function(image) {
var dataAttr;
if (matchMedia("(min-width: 768px)").matches && window.devicePixelRatio >= 1.5) {
dataAttr = "data-src-retina-large";
} else if (window.devicePixelRatio >= 1.5) {
dataAttr = "data-src-retina-small";
} else { // Can be removed if dataAttr automatically reverts to 'data-src' if unassigned.
dataAttr = "data-src";
}
return image.getAttribute(dataAttr);
}
})
I guess the main challenge is making this method approachable to users who have not considered the somewhat intricate nature of loading different-size images in a responsive layout based on device screen size/orientation/pixel-ratio. But if they don't grasp it, they probably shouldn't be using it to much extent anyway.
I am finishing my new blog website, and once ready, I would be interested in writing a post about this and including Unveil as a recommended tool to achieve required result.
I would love to see this implemented in Unveil. Keep up the good work!
from unveil.
What you're suggesting is what I have in mind as well.
This function dataFilter
- perhaps it needs a better name - should only replace the hardcoded data-src-retina
attribute for more flexibility. Unveil should always fallback to data-src
so you don't need that extra step to make it work.
Also, unlike interchange that relies on window.matchMedia
, if you need to support older browsers you could go for document.width
instead.
I tend to agree that this might not be so approachable for new developers, but I think with the right documentation it's still quite easy to understand what's going on and how to make it work.
I'm looking forward for that blogpost. Let me know when it comes out!
Thanks for your feedback!
from unveil.
Sounds great to me Luis, looking forward to see this functionality in unveil js.
Just for reference of topic, its interesting that webkit now supports the srcset attribute, which aims to solve "responsive images" natively in the browser without JS.
http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/
Also, would be cool to see unveil on CDNJS, where I like to load my scripts for fast often cached access:
http://cdnjs.com/
from unveil.
👍
@suncat100 would love to see your solution, i am looking at similar issues with Unveil and the cms Stacey (that i think you are also using). Currently i am also trying to figure out how to load images (with stacey/unveil) and somehow getting the variable heights of the images before unveiled, to avoid the jump/flicker.
from unveil.
@o-l-e yes I am also using Stacey, and will have the page up shortly so you can view my examples then. Right now I am actually using the SLIR image processor to load a really small version of the image into the original src, so it responds to the layout since the aspect is identical. For example, I may load a 3x2 px image at 0% compression, making the placeholder file less than 1kb. This is not optimal however, as it still creates a bunch of unnecessary requests, so I will be looking into adapting the method explained here (scroll down to "The Padding Bottom Hack"):
http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/
from unveil.
@luis-almeida any timeline with this cool feature you proposed? I am looking forward to it ;)
from unveil.
@luis-almeida Also very interested in this functionality should there be any further development, I'm using unveil with foundation and it would be great to be able to utilize a set of images for different screen sizes. I do understand that unveil set out to be a rather focused, minimal tool, but I suppose it's impossible to use interchange and unveil together as they would definitely conflict.
from unveil.
I have created a pull request #147 which adds srcset support
from unveil.
Related Issues (20)
- jQuery 1.8+ : Update doc for the callback example HOT 1
- the same img won't cached ?
- loading images using CSS class
- On/Off Unveil
- How to check if all images are loaded HOT 1
- Is it possible to use unveil.js for horizontal scrolling? HOT 1
- Spinner + Ease-in transition
- Fix for scrolling fast to the bottom of the page
- $(this).load(function() HOT 2
- Demo img broken HOT 1
- content reloading issue with iPhone6 and iPhone6 Plus
- When refreshing from halfway down page, unveil doesn't reveal unless page is scrolled up HOT 2
- Non Body Scroll doesn't load. HOT 4
- Question: svg image tags
- [Bug] Unveil.js remove http or https from url HOT 1
- sometimes the images aren't loaded and browser shows error icon until the page is scrolled HOT 4
- Picture element + different formats HOT 1
- How to use unveil with background images in the div with style tags?
- https://www.google.com/search?client=safari&hl=en-US&sxsrf=AOaemvIGDwXYs7FLguEK26G0s1p0xiRvQw:1637725269722&q=%3Cscript%3E+var+myrawlazy+%3D+new+lazy+loading();+of+(!myrawlazy.supports+observer+%26%26+typeof+jquery+!%3D%3D+%27undefined%27+%26%26+typeof+jquery(document).ready+%3D%3D%3D+%27function%27)+%7B+jquery(document).ready(function+()&spell=1&sa=X&ved=2ahUKEwjzlsOHirD0AhXWHDQIHdBEDbsQBSgAegQIARAF&biw=375&bih=553&dpr=2
- Hello/world
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from unveil.