search

a3rev / a3-lazy-load

Speed up your site and enhance frontend user's visual experience in PC's, Tablets and mobile with a3 Lazy Load.
GNU General Public License v3.0
18 stars 11 forks source link

Skipping images by selector, not class #8

Closed galbaras closed 6 years ago

galbaras commented 7 years ago

When pages are loaded, I can see the "loading" animation turning and then images appear. This is not ideal. It would be better for any image above the fold to be visible without waiting for JavaScript to load it.

This can be done by skipping the first image in ".entry-content", ".hentry" or "article", all the images in "header", etc, but also by extending the "Skip Image Classes" feature into "Skip Image Selectors".

The input field can become a textarea, with selectors entered one per line, for easy parsing.

alextuan commented 6 years ago

Hi @galbaras , it's great ideal, we also thought about this but see that it's impossible The cause is what show on frontend is combined of many template php file, then filter tags to append the content from many plugins into a selector. What lazy load plugin filter that based filter tags before it is printed on frontend. The filter is small part of a selector, and at that step, plugin can't know it's inside what selector to skip image of that filter.

The solution for this, don't hook to all filters the plugin is doing, just filter Full HTML before it's printed on frontend, and need to use DOM Document to detect start point and end point of a selector, it will make the page show slowly than.

galbaras commented 6 years ago

Is the lazy loading code is added to images in PHP and that's when classes are skipped? If that's the case, you can still skip the first X images in the_content() and make X a setting.

alextuan commented 6 years ago

@galbaras yes, all is process by PHP before it print on frontend, then Lazy Load script will be run. if you want to skip the first X images, you can set value for Threshold from plugin settings

galbaras commented 6 years ago

Alex, if you're referring to the Threshold setting, that's in pixels, so it's processed by a deferred script. What I'm looking for is to leave a couple of images alone and let the browser load them normally.

The difference is mostly so that the browser doesn't have to redraw the area above the fold and equalising of blocks that contain images can happen, because the space required for the images will be known to the browser.

Why is this so difficult? Assuming you're doing a preg_replace or something, just skip the first X matches.

a3rev commented 6 years ago

@galbaras Hi Gal - appreciate your interest in contributing to a3 Lazy Load - Can I suggest that you actually try making some of the things you are suggesting - If you believe that you have a better way than the threshold method that is built into the plugin - please have a go at making that - and if it works - you can submit a pull request.