jetmartin
commented
10 years ago Hi.
Thanks a lots for your feedback and for the pull request. Be sure i will test it with all the available configurations, callback and so on (after the new year party).
Just, in you'r case i guess it is not the best way to do so. Sorry if my documentation is not clear enough. If you can suggest how to improve i will be glad.
So, in you'r case you have to create two displays in the config element. So the custom event "onAllImagesLoad" is still available. using two separate call make it unusefull.
Alqo, always use a "defaults" for each display for old browsers as IE7 or 8.
So the way to do it is the following one :
displays : { // The displays to combine grid system & mediaqueries 'classA' : { // The display name (what you want). 'gridClass' : 'classA', // the class use to recognize the display. 'display' : { 'desktop' : 'b', //1024 'phone' : 'm' //320 'defaults' : 'b' //1024 Always use a default. } }, 'defaults' : { / Default, use for classB and all images who are not classA. 'display' : { 'desktop' : 'b', //1024 'phone' : 'm' //320 'defaults' : 'b' //1024 Always use a default. } } }
For advanced config (if you'r not using a grid system) you can also use a "parent" argument for the display detection.
Please see the demo and the update i've made fiew days ago (0.1.4 release) : http://jetmartin.github.io/responsive-lazy-loader jetmartin.github.io/responsive-lazy-loader/demo.html
vishnun
If for a set of img tags, say set-A, i want settings settings-A to be passed in the initialization:
$("img.classA").responsivelazyloader({ mediaQueries : { // The mediaqueries used for image set A 'phone' : "(max-width: 767px)", 'tablet' : "(min-width: 768px) and (max-width: 991px)", 'desktop' : "(min-width: 992px)" }, displays : { // The displays to combine grid system & mediaqueries 'defaults' : { 'display' : { 'desktop' : 'b', //1024 'tablet' : 'z', //640 'phone' : 'm', //320 'defaults' : 'b' //1024 } } } });
AND
If for another set of img tags, say set-B, i want settings settings-B to be passed in the initialization:
$("img.classB").responsivelazyloader({ mediaQueries : { // The mediaqueries used for image set A 'phone' : "(max-width: 767px)", 'desktop' : "(min-width: 992px)" }, displays : { // The displays to combine grid system & mediaqueries 'defaults' : { 'display' : { 'desktop' : 'b', //1024 'phone' : 'm' //320 } } } });
THE ISSUE: The initialization for Images in setB overrides the settings for the set of images in set-A.
Would want to be able to initiate different configurations for lazy loader for different images on the same page.
P.S: If this is already possible, its not so obvious how to do it.