Trigger an event when pictureFill completed #53

Closed
idflood opened this Issue Feb 12, 2013 · 8 comments

Comments

Projects
None yet
6 participants
@idflood

idflood commented Feb 12, 2013

Triggering a custom event at the end of the pictureFill function would have some benefits I think.

Imagine if you have a responsive slideshow with images of different height. Right now, If you add the slideshow on document ready it will have a wrong height since the images are not replaced yet. You could use some imagesLoaded plugin, but again, the images are not replaced when you call it and it will still give a wrong height.

One workaround is to create the slideshow on document load event but it's not the best solution and can have some "long" delay.

Since on my setup I have jQuery I simply added this at the end of the pictureFill function:

$(w).trigger("picturefill_complete");

Then I was able to simply do something like this and it fixed my issue:

$(window).on("picturefill_complete", function(){
  $("#slideshow").imagesLoaded(function(){
    slider.reloadSlider();
  });
});

So, is this kind of addition possible? If it is, I could try to make a pull request : )

@LorenzKahl

This comment has been minimized.

Show comment Hide comment
@LorenzKahl

LorenzKahl Feb 22, 2013

+1 for addition of callbacks :-)

+1 for addition of callbacks :-)

@ixisio

This comment has been minimized.

Show comment Hide comment
@ixisio

ixisio Jun 13, 2013

that would be a nice feature!

ixisio commented Jun 13, 2013

that would be a nice feature!

@staabm

This comment has been minimized.

Show comment Hide comment
@staabm

staabm Jun 13, 2013

I would suggest to use jQuery event namespaces: $(w).trigger("complete.picturefill");

see http://api.jquery.com/on/#event-names

staabm commented Jun 13, 2013

I would suggest to use jQuery event namespaces: $(w).trigger("complete.picturefill");

see http://api.jquery.com/on/#event-names

@ixisio

This comment has been minimized.

Show comment Hide comment
@ixisio

ixisio Jun 13, 2013

agreed!
might look something like this:

$(window).trigger("eventType.namespace") 

I prefer a dot instead of colon, but both would be okay

Cheers

ixisio commented Jun 13, 2013

agreed!
might look something like this:

$(window).trigger("eventType.namespace") 

I prefer a dot instead of colon, but both would be okay

Cheers

@staabm

This comment has been minimized.

Show comment Hide comment
@staabm

staabm Jun 13, 2013

fixed my example above... the . is the offical jquery way.. thanks @ixisio

staabm commented Jun 13, 2013

fixed my example above... the . is the offical jquery way.. thanks @ixisio

@u982744

This comment has been minimized.

Show comment Hide comment
@u982744

u982744 Jun 13, 2013

I don't think this should be done with jQuery. Keep it decoupled from jQuery.

u982744 commented Jun 13, 2013

I don't think this should be done with jQuery. Keep it decoupled from jQuery.

@ixisio

This comment has been minimized.

Show comment Hide comment
@ixisio

ixisio Jun 13, 2013

@u982744 you 're absolutely right.
think we can close this issue, the correct approach already exists #60.

ixisio commented Jun 13, 2013

@u982744 you 're absolutely right.
think we can close this issue, the correct approach already exists #60.

@scottjehl

This comment has been minimized.

Show comment Hide comment
@scottjehl

scottjehl Feb 28, 2014

Owner

Thanks for your ideas here. We're closing this out as Picturefill moves to support the new standard markup landing in browsers. Thread here: #125

Owner

scottjehl commented Feb 28, 2014

Thanks for your ideas here. We're closing this out as Picturefill moves to support the new standard markup landing in browsers. Thread here: #125

@scottjehl scottjehl closed this Feb 28, 2014

xini added a commit to xini/silverstripe-responsive-images that referenced this issue Dec 21, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment