dbhynds

3-6mb is nothing to sneeze at, especially for mobile users. You should be able to just use the plugin out of the box, but if you’re proficient with js and want to do some more advanced implementation with the slider, check out the github page (https://github.com/ressio/lazy-load-xt/).

Good luck, and if you need any additional help, let me know.

Great… so looking at this it looks like the video will load on the page like normal, but CSS will make it appear in the background.

If that’s the case, this plugin ought to lazy load it, no problem. Have you tried it yet? If it’s not working, let me know and I’ll look into it.

Possibly. It depends on hour you’re implementing the video. How are you loading the ideo on the page currently?

Can you send me the markup inside of the noscript tag? After that, I should have enough information to diagnose.

So with the problem on your original post… url("undefined") …Do you have “Lazy load background images” checked?

One last request (sorry for not asking in my previous question) … can you view source (not inspect) and provide the HTML markup with the plugin enabled?

Comparing the view source with the plugin enabled vs disabled should help me sort things out. Also, are there <noscript> tags after the image tag you refernced above? Could you include that as well?

Thanks!

I’ll look into this asap. thank you.

Thanks for the bug report. I’ll investigate. Can you help me out with one thing? Deactivate the plugin, copy the markup for the same image, and paste it here, then reactivate it.

Thanks!

Hah…. great, well, glad you got it working!

Hmmm… curious.

Can you send me a screenshot? And also, view source, and paste a chunk of the HTML where the images are getting output? Or provide a link or something?

My first/best guess is that the markup for the images is getting output like this:

<img src = "https://example.com/" />

I think the problem is the whitespace (spaces) on the src= bit. Change the markup to this, and I bet it’ll work:

<img src="https://example.com/" />

Let me know how it goes.

That’s curious. In looking at the Pingdom results you posted, it seems that the pageload problems are coming from slow server response times on other assets, not the Lazy Load scripts.

On the first test you posted (https://tools.pingdom.com/fpt/#!/eEEiZT/https://fpv.tv/hubsan-h501s-x4-fpv-quadcopter-with-gps-osd-follow-me-and-1080p-camera/) the files that are responsible for the slow load times are several of your theme css files and the sabai plugin css. This plugin doesn’t interfere with the stylesheets that are being loaded.

In the second test (https://tools.pingdom.com/fpt/#!/eqtKX8/https://fpv.tv/hubsan-h501s-x4-fpv-quadcopter-with-gps-osd-follow-me-and-1080p-camera/) the slow response times are from a dozen-or-so .jpgs.

Regardless, nothing in the tests you posted indicates anything that would suggest my plugin is slowing things down. This is quite perplexing. I’m not sure what to make of it.

I tested your site myself a few times, and it took approximately 10-15 seconds to load each time (and the plugin is still deactivated, as far as I can tell). I suspect that your issue is actually a server problem, and it’s just a coincidence that it loaded quickly on pingdom with my plugin installed.

It’s hard to say for sure, but that’s my best guess. You’re also making an extraordinarily high number of http requests (~140). I’d recommend also installing a plugin like Autoptimize to combine and minify your JS/CSS. That, in combination with the lazy-load plugin, ought to significantly cut your pageload time.

ecograder.com would also be a helpful evaluation tool.

Sorry I couldn’t provide a more concrete answer, but I’m not convinced based on what I’m seeing here that this plugin is the issue (though I’m not entirely ruling it out).

Ugh… I accidentally overwrote my changes. I’ve updated it again. 0.5.2 should have your fix.

I have released an update. Give it a try.

I have released an update. Give it a try.

TL;DR: Yes, it’s permissible to omit closing / on an image tag, but my plugin (and others) won’t recognize it.

It’s true that HTML5 doesn’t need to have a trailing slash on an image tag. However, due to the complexities of parsing HTML in PHP, I’ve made the decision that this plugin will require valid XHTML in order to find objects to be lazy-loaded. This plugin uses regex to locate HTML tags and replace src with data-src. Correctly identifying when a tag opens and closes in PHP becomes incredibly complicated for a myriad of reasons when you don’t have well-formed XML (which is permissible in HTML5).

I have made the decision that it is safer to miss a few tags which aren’t XHTML-compliant rather than risk incorrectly matching additional HTML content. (Missing an img is better than finding an img that’s not really an img). This is one of the arguments for continuing to adhere to XHTML despite the relaxed stance taken in HTML5. I’m not really invested in that argument one way or the other, but for the purposes of this plugin, HTML needs to be in that format.

Feel free to make that call for yourself. There’s no real downside (aside from the time it takes to fix it) of making your markup XHTML compliant, and the upside is that this plugin, and other similar plugins will work with it.