0

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.

Jaime Montoya
  • 6,915
  • 14
  • 67
  • 103
  • what images? what url? please include the relevant code. also, did you try other plugin? (preferrable without jquery) – andyrandy Jul 28 '18 at 09:05
  • 1
    This is most likely messing up with relative paths somewhere. Appending an additional `/#_=_` to the end of your URL of course changes the “folder depth” as well. So if any image was loaded using `../foo/bar.jpg` before, now that would likely need an additional `../` to work the same way again. Should be fixable by using paths starting with a `/` to begin with. – CBroe Jul 30 '18 at 08:37
  • @CBroe See UPDATE 2 in my question. I wonder if the problem is not just the `#_=_`. Maybe Facebook Connect does something more that affects jQuery Lazy. – Jaime Montoya Aug 02 '18 at 00:20
  • Did your URL end with a trailing slash before already? – CBroe Aug 02 '18 at 06:34
  • @CBroe No, it did not. This is how it ended: `...stagingarea/San-salvador`. After logging in successfully using the Facebook Connect button, I had this in the URL: `.../stagingarea/San-salvador/#_=_`. – Jaime Montoya Aug 02 '18 at 07:11
  • So your lazy loading would probably not work either if you called the page using `/stagingarea/San-salvador/` to begin with, without Facebook having done anything at this point …? That would point even more in the direction of wrong relative URLs then. – CBroe Aug 02 '18 at 07:16
  • @luschn See UPDATE 3 in my question. Two different plugins for lazy loading images, both of them experiencing the same issue. Both of them use jQuery though. Do you think some incompatibility of Facebook Connect with jQuery is the cause of this bug? I am thinking about upgrading the Facebook API. – Jaime Montoya Aug 04 '18 at 23:56
  • @CBroe See my UPDATE 3. Even with a different plugin, same bug. Maybe I should upgrade the Facebook API. – Jaime Montoya Aug 04 '18 at 23:57

1 Answers1

0

I experienced a similar bug using Slick carousel (Pictures of Slick carousel do now show only after coming back from a successful Facebook Connect). I guess upgrading the Facebook PHP SDK (v.3.2.3) to something newer might help. For now I am not using jQuery Lazy anymore after not finding a fix for this bug yet.

Jaime Montoya
  • 6,915
  • 14
  • 67
  • 103