Comments (8)
I understand the use case and issue. Will see if I somehow can add support for it.
The reason why I’m looking at the device width and not the width is that I don’t want to load multiple image sources for the same image when you resize (multiple server request per image). And if you have a big screen but the browser window is tiny when you open it, I don’t want to upscale a low res image if you resize it up.
My use case doesn't solve if you have different images per view but only if you're using the same image in different sizes.
from blazy.
I've come to understand device vs reference pixels (device's pixel ratio). Looks like the feature request can better be described as such:
"When the window is resized and the device's pixel ratio is changed, the retina src should be loaded in if applicable."
from blazy.
Hey Josh.
The device pixel ratio will never change, also not on resize. If you add a second image to the data-src and your device has a retina ratio it'll load the retina image, http://dinbror.dk/blog/blazy/#Retina.
from blazy.
Device pixel ratio does change when zooming (pinch zoom on mobile, control
plus/minus on desktop)
On May 25, 2014 11:15 AM, "dinbror" [email protected] wrote:
Hey Josh.
The device pixel ratio will never change, also not on resize. If you add a
second image to the data-src and your device has a retina ratio it'll load
the retina image, http://dinbror.dk/blog/blazy/#Retina.—
Reply to this email directly or view it on GitHubhttps://github.com//issues/16#issuecomment-44141598
.
from blazy.
Yes but not on resize. If the user has zoomed in from the beginning it might load the retina image but not if you start to zoom and the ratio changes. I think that's fine. Fits my load-only-one-image approach :)
from blazy.
Not to split hairs but zooming does trigger a "resize" js event. My feature suggestion would be to load in higher rez images when the user zooms in. Most users aren't "zoomed in" to begin with - they open the page at 100% zoom level and then may zoom in from there. Our use case requires upgrading the image quality the moment the user zooms in. I'll be forking & implementing it at some point, I'd be happy to send a pull request if you're interested. Let me know if you're interested, closing for now.
I'd do the logic such that an image can be upgraded upon zooming in, but only once. Zooming back down won't reload the low quality images or any nonsense like that.
Take a tangible example. User has bad vision. User tries to read text on page but cannot, so the user zooms in. Text/images become larger, but the text within images should also enlarge. Currently the user would just be zooming in on a blurry image. With my suggestion, zooming in on images that contain text would become crisper text.
Another tangible example, a website that sells high resolution photos - If the user zooms in for whatever reason, this would help avoid the photos loosing resolution that could be otherwise displayed.
Also you could facilitate users extending your plugin by ensuring you have a method that could potentially retrigger loading. This way users can choose to bind blazy's loading method to either the "onload" event of their page, or both "onload" & "resize". Obviously different users want different behavior (my preferences vs yours) and this would be a nice inversion of control, to let users vary the behavior of their own implementation to match their specific needs. The downsize to this approach is you'd have to remove the logic that cleans up the "data" attributes, this way the loading is repeatable.
from blazy.
My feature suggestion would be to load in higher rez images when the user zooms in.
This indeed would be useful in many scenarios. & most would be useful outside blazy IMHO.
Why not have a separate, more universal script?
from blazy.
Not sure what you mean by separate script. The only changes to blazy.js required would be to not delete the "data-src" attributes, and to expose a method that triggers the loading of images. I as a user can then bind a callback to resize events:
$(window).resize(function() {
$('img').removeClass('loaded');
blazy.prototype.forceReload(); // this would be like .revalidate() but would also clear any state like the images array
});
The browser's cache will then prevent re-downloading images if the "src" did not change. Also maybe you would have a conditional to prevent setting the "src" to the non-retina version, if it is currently set to "retina" version.
Basically, initializing the plugin should be a repeatable action. I find lots of these JS widgets modify your markup, which makes the logic not repeatable. This causes big problems when the user needs to bind to new events like resize, or pjax navigation. I predict as more websites start to use pjax/push state - a lot of plugins will need to have their architecture revisited such that running them is repeatable.
from blazy.
Related Issues (20)
- srcset bug in Chrome & FF
- Not working on hidden tabs HOT 1
- Make bLazy available via composer? HOT 2
- Not working with webpack Encore HOT 1
- Issue in Safari & Firefox (page stays blank for 5-7 seconds)
- Parsing data-src with URL parameters HOT 2
- Background images data-src-small HOT 1
- Not working on Android 'data-src'
- Is an 'alt' attribute required in img tags? HOT 1
- What is the meaning of "loadInvisible"? HOT 3
- Current project status HOT 2
- not working in silder HOT 2
- Not working with older IE browsers versions 5 & 7 HOT 2
- Is it possible to use JS to alter src to data-src on iframe? HOT 2
- invalid issues
- Video and poster
- Cannot exclude featured image HOT 2
- Default lazyload image example Not working
- Safari iOS 15.4.1 lazy loading not working. HOT 2
- Doesn't work with pagination
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 blazy.