Infinite Scroll affecting CSS Javascript generated featured image

Resolved SAM
(@samdlaw)

8 years, 1 month ago

I’m using Dara theme (Child theme to change few parameters for color & font) on my blog blog.avxio.com.

As per theme, it takes first image as the Featured image if not already defined. On first load it looks and works as expected. On scrolling (to invoke Infinite Scroll), next page is loaded onto the browser. However, if page is scrolled up again the generated featured image disappears.

Similar issue is also faced with other themes following similar principle (Baskervile 2). I’ve tried using Developer in Firefox to see what happens (but not very proficient, though). The page source doesn’t change till the Featured Image post is in view (my assumption something to do with lazy load of Jetpack?). Can anyone help me out?

Additional pointers:
1) Post with image has been knowingly made sticky to reflect the behaviour. Tried on Safari, Chrome & Firefox.
2) One of the image is from Flickr direct link to image and other is in Media saved in hosting

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Tracy
(@tmmbecker)

8 years, 1 month ago

@samdlaw I am seeing the same thing that you’re seeing. When scrolling back up after invoking infinite scroll, the image links appear to be broken.

I suspect that this might be related to your theme specifically. Let’s first verify your suspicion that this is related to Lazy Images. Could you disable that to see if that fixes the problem?

Would you then enable Lazy Images again, switch to Twenty Seventeen temporarily and then check it again? If you don’t want to impact the front-end of your site, you can use this plugin:

https://ww.wp.xz.cn/plugins/theme-switcha/

Let us know what you find 🙂

Thread Starter SAM
(@samdlaw)

8 years, 1 month ago

@tmmbecker It is indeed due to Lazy load option of Jetpack. Both theme and Jetpack are supported by Automattic, so was a hunch for Jetpack to be issue. Didn’t need to change themes 🙂

Removed all caching options to be sure. Refreshed page. Image link still breaks. As is state confirmed.

Disabled Lazy load in Jetpack. Refreshed page. Scrolled to load more. Scrolled up and image still persists (link doesn’t break). Tried 2 more times, just to be sure.

Reverted the settings and back to square one.
Thread Starter SAM
(@samdlaw)

8 years, 1 month ago
I really wish, I could investigate deep but I’m not very conversational with the backend codes but it seems lazy load after processing the image marks a flag.

After processing the image, by tagging class as “jetpack-lazy-image–handled” & “data-lazy-src” Jetpack seems to identify the image has been processed. Once the view port changes, the script is rerun for next iterations and it seems to skip all entries marked as “data-lazy-src=1”. When we return to same viewport with image already loaded, “data-lazy-src=1” is set, hence the image processing is skipped but due to previous run the src is now 1 “src=1”. It tries to process “src=1”, which obviously is Image not found, it adds another html parameter “scale=0”.

It affects only the tag and not the javascript, which already loaded on the system.

All in all, a hypothesis.

Firefox, Developer shows below:
Before:
```
		<div class="post-thumbnail">
			<a href="http://blog.avxio.com/2016/11/19/music-to-the-ears/">
				<img src="https://i2.wp.com/farm6.staticflickr.com/5468/30738742760_5c42c7d4cf_b.jpg?resize=880%2C312&ssl=1&crop=1" title="Music to the ears" class="attachment-dara-featured-image wp-post-image jetpack-lazy-image--handled" data-lazy-src="1"><noscript><img src="https://i2.wp.com/farm6.staticflickr.com/5468/30738742760_5c42c7d4cf_b.jpg?resize=880%2C312&ssl=1&crop=1" title="Music to the ears" class="attachment-dara-featured-image wp-post-image" /></noscript>			</a>
		</div>
```
After
```
		<div class="post-thumbnail">
			<a href="http://blog.avxio.com/2016/11/19/music-to-the-ears/">
				<img src="1" title="Music to the ears" class="attachment-dara-featured-image wp-post-image jetpack-lazy-image--handled" data-lazy-src="1" scale="0"><noscript><img src="https://i2.wp.com/farm6.staticflickr.com/5468/30738742760_5c42c7d4cf_b.jpg?resize=880%2C312&ssl=1&crop=1" title="Music to the ears" class="attachment-dara-featured-image wp-post-image" /></noscript>			</a>
		</div>
```
Tracy
(@tmmbecker)

8 years, 1 month ago

Great troubleshooting! Thank you so much for the detailed report.

Another Jetpack user actually identified this same bug just a bit ago and reported it here:

https://github.com/Automattic/jetpack/issues/9527

They even created a fix that we’ll include in the next release.

In the meantime, you can either keep Lazy Images disabled until the next version of Jetpack comes out in two weeks or you can edit the line in modules/lazy-images/js/lazy-images.js as well as the minified versions of those files.

I hope that helps!

Thread Starter SAM
(@samdlaw)

8 years, 1 month ago

Thanks @tmmbecker. That indeed solved the problem.

Updated the /modules/lazy-images/js/lazy-images.js & _inc/build/lazy-images/js/lazy-images.min.js and voila!

Awaiting for official release 🙂

Tracy
(@tmmbecker)

8 years ago

Thanks for letting me know. Glad to hear it!

You can expect the official release before the end of the month 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Infinite Scroll affecting CSS Javascript generated featured image’ is closed to new replies.