WPIntell

Source evidence

CSS Background: Gradients

Zedna WP Image Lazy Load · support · 2017-05-08T17:39:00+00:00

mixedsentiment
mediumseverity
0.78relevance
4replies
Evidence linked to opportunitycommercial context

Proof Health

Open evidence

Commercial opportunities need traceable source links before they are treated as build-worthy.

6 / 28 rows with source links

21.4% of this page's analysis has direct source links.

0 build-decision rows missing links

0 rows here require auditable proof before promotion.

22 rows with no attached evidence

0 rows have source counts but still need direct links.

Conversation

support
Daniel Chase resolved
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! 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) { Hi @riseofweb , thanks for your recommedation, i will implement it. Regards 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? 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

Comments

4 shown
Daniel Chase 2017-05-08T17:53:00+00:00

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) {

Radek Mezulanik 2017-05-09T07:57:00+00:00

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

Daniel Chase 2017-05-09T22:20:00+00:00

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?

Radek Mezulanik 2017-05-10T13:19:00+00:00

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