Background Image Lazy Loading RegEx Issue

  • Resolved andyexeter

    (@andyexeter)


    3 years, 9 months ago

    Hey,

    There’s an issue in the regex and str_replace calls used for lazy loading background-images.

    If an element contains the background-image URL in a separate attribute, the str_replace on line 985 of the autoptimizeImages class fails to add the data-bg attribute.

    For example, given the following element:

    <div data-url="https://example.org/cat.jpg" style="background-image:url(https://example.org/cat.jpg");></div>

    The regex gives the following matches:

    0: <div data-url="https://example.org/cat.jpg" style="background-image:url(https://example.org/cat.jpg"
    1: <div data-url="https://example.org/cat.jpg"
    2: https://example.org/cat.jpg

    The first str_replace call on line 983 assigns the $out varaible a value of:

    <div data-url="data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3.org/2000/svg%22%20viewBox=%220%200%20500%20300%22%3E%3C/svg%3E" style="background-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3.org/2000/svg%22%20viewBox=%220%200%20500%20300%22%3E%3C/svg%3E)"

    The second str_replace call on line 985 then looks for $matches[1] within the $out variable to append the data-bg attribute to it, however, $matches[1] (<div data-url="https://example.org/cat.jpg") is no longer present because the image URL within the data-url attribute has been replaced with the placeholder.

    This means the data-bg attribute does not get added and therefore the blank placeholder image does not get replaced.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Nice find!

    Haven’t tested yet (so I might be totally off) but at first sight swapping those 2 lines might work?

    Just curious; in which cases would having the image URL in both the inline CSS and in a separate attribute occur, what is the goal?

    Thread Starter andyexeter

    (@andyexeter)

    I did try swapping the two str_replace lines around before posting here but this also then replaces the image URL within the data-bg attribute with the placeholder.

    This is a project we have inherited from another team so I’m not entirely sure of the goal of both the data-url attribute and the inline style on the element, and it’s of course possible that the data-url attribute isn’t required in this case (I’d need to look into the theme code further) but I still thought it best to post here ??

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I did try swapping the two str_replace lines around before posting here but this also then replaces the image URL within the data-bg attribute with the placeholder.

    Yeah, thought I might have missed something by just staring at the code ?? I’ll do some real troubleshooting on this tomorrow ??

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I think I have a fix Andy, see https://github.com/futtta/autoptimize/commit/2479001d72367cd0df3efdf230019ab83d315fda ?

    Thread Starter andyexeter

    (@andyexeter)

    The fix works for me! Thanks for the quick turnaround on this.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome, thanks for your assistance!

    feel free to leave a review of the plugin and support here! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Background Image Lazy Loading RegEx Issue’ is closed to new replies.