CSS Background: Gradients

  • Resolved Daniel Chase

    (@riseofweb)


    9 years ago

    Thank you for spending the time to create this plugin. When attempting to implement this on my website, I ran into a problem.

    Lazy loading gradient backgrounds is not necessary and it breaks the background from loading.

    Example CSS3:
    background:linear-gradient(90deg,rgba(130,130,130,0.95) 5%,rgba(255,255,255,0.95) 52%);

    Gradient backgrounds should be skipped by the plugin.

    To see other gradient examples, visit: https://www.w3schools.com/css/css3_gradients.asp

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Daniel Chase

    (@riseofweb)

    9 years ago

    I have not tested this, but in the JS file where you are looping through all elements, you could try using this:

    Current:
    if ($(this).css('background-image') !== 'none') {

    Possible solution:
    if ($(this).css('background-image').indexOf('url') == -1) {

    Plugin Author Radek Mezulanik

    (@zedna)

    9 years ago

    Hi @riseofweb,
    thanks for your recommedation, i will implement it.

    Regards

    Thread Starter Daniel Chase

    (@riseofweb)

    9 years ago

    Also I found that this is not compatible with Visual Composer, because they add !important to background images.

    Solution:
    this.style.setProperty( 'background-image', 'none', 'important' );
    this.style.setProperty( 'background-image', bgbak, 'important' );

    After making this change to my JS file, I tested the lazy css background-image loading it works in Chrome, but not in FireFox or Internet Explorer. Looking at the network waterfall Chrome downloads the background images in the lazy, correct way. However, Internet Explorer 11 and FireFox (Latest version) loaded them at page load time and not lazily.

    Does the background-image lazy loading work in all browsers?

    Plugin Author Radek Mezulanik

    (@zedna)

    9 years ago

    Hi @riseofweb,
    i used $(this).css('cssText', 'background-image: none !important'); and tested in the same browsers as you mentioned. This solution seems working in all browsers you mentioned.

    I tested image loading in page speed test services and i can see images in waterfall view, but when i make network tests in my browsers (Chrome&Firefox), i see getting image headers, but 0B is loaded. I´m not sure, that i can fully trust web services for testing this plugin. What do you think about it?

    Thanks

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

The topic ‘CSS Background: Gradients’ is closed to new replies.