I implemented jQuery Lazy: http://jquery.eisbehr.de/lazy/. Everything works correctly except for one thing: When I click the Facebook Connect button, the images remain blank. After I click around, they come in as usual.
I have noticed that when I click the Facebook Connect button to log in, the URL in the address bar changes from [My URL] to [My URL]/#_=_. The Facebook Connect implementation does something that prevents the jQuery Lazy images to load unless I click around after this Facebook login. I have not found online anybody complaining about this. I thought it would be a common and addressed bug. Any ideas about why this could be happening?
UPDATE 1: When I visit [My URL]/#_=_ without using Facebook Connect at all, jQuery Lazy does not work either, the images remain blank. What happens is that when I click around, this #_=_ that is appended immediately after I log in with Facebook, gets removed. What I am seeing is that the problem is this #_=_ that Facebook Connect puts at the end of our URL. I see this situation is discussed at Facebook Callback appends '#_=_' to Return URL and the logical thing to do would be to get rid of the #_=_ but not without studying first the implications of doing that.
UPDATE 2: I followed Gorgi Rankovski's comment to Ryan's solution at Facebook Callback appends '#_=_' to Return URL and used this in my head tag:
<script type="text/javascript"> var idx=window.location.toString().indexOf("#_=_"); if (idx>0) { window.location = window.location.toString().substring(0, idx); } </script>
Now [My URL]/#_=_ becomes [My URL]/, which is what I wanted. Nonetheless, this did not fix the problem about the jQuery Lazy images not loading after clicking the Facebook Connect button.
UPDATE 3: I tried https://appelsiini.net/projects/lazyload/ instead of http://jquery.eisbehr.de/lazy/ for lazy loading images, two different plugins for lazy loading images, and both of them experience the same bug when using Facebook Connect.