I am using JetPack on my WordPress site, and have lazy loading enabled. However, in my site I update some content with AJAX, and this results in loading the 1x1 placeholder of images, rather than the true image, which the lazy load would handle.
How do I call lazy loading again, using Jet Pack? I seem to recall there being a JavaScript function, but can't find what it is.
This works for me.
$(document.body).trigger('post-load');
It triggers a jQuery event that the lazy load module is listening for to lazy load images from infinite scroll.
Related
I want to know if there was a way to make sure an image was loaded when loading it outside Preload. I sometimes get “Uncaught ReferenceError: loadImage is not defined” and sometimes it loads. It doesnt seem to be predictable. The reason why I need to load outside preload is because I am creating a “preview art on your wall” module where clients load pictures of their wall at runtime in a product page via a “upload image” button in the page. They can change their wall as they please.
You can call preload, by just doing preload(); anywhere. So I guess in your situation you'd just run preload(); when someone uploads a file, you can always add code in preload but try avoiding it.
There is a 5 second or so after the page is loaded, that e.g. clicking or hovering on elements won't work.
I figured out, it has to do with the Tag Manager.
Just like suggested in the guide, it's loading asynchronously.
Does somebody have any suggestion how to avoid this lag?
GTM shouldn't cause such delays - it loads asynchronously. If you want to test it - remove GTM from the website and check page load time. You can also use WebPageTest and block GTM in the settings to prevent the script from running. Unless there are any custom HTML injections that prevent the buttons from working before all the content is loaded, it isn't GTM.
Looking at the load waterfall you should see which element blocks the page from loading.
I found out what the problem was that was issue in our implementation, not in GTM.
I'm using swfobject to load a flash object on my site and it's loading very slowly on pages with a lot of data...as if swfobject waits until the page loads before loading the swf.
Here's an example page with swfobject: http://www.tripline.net/trip?id=066434736132100383DB8A184B7D8D17
If I change out the swfobject code with an iframe (with the swf as the src) or just use object embed, the flash object loads much, much faster...before the rest of the page loads.
I know there are a ton of page load time improvements I could make to that page (I'm working on that as well), but I'm wondering if there are some specific changes I could make to the way I'm using swfobject to get the same loading speed as an iframe or object embed?
A couple of things to try:
Use static publishing.
embedSWF() waits until the HTML DOM is ready before replacing the content with the swf. With static publishing, browsers that support the standard way of embedding objects without using javascript will start loading the swf as soon as they get to the <object> element, and then swfobject will patch things up in javascript when the DOM is ready. That should give a slightly faster display of your swf.
Move even more javascript to the bottom of the page, if possible.
(I rarely do that, but) since any javascript will block the DOM parsing (in most browsers) until the script has been (loaded and) executed, that means it'll get to the swf later.
This would only make a real difference for static publishing, since dynamic publishing will still wait for DOM ready. DOM ready still won't occur until all scripts on the page have loaded and executed, which should take about the same time regardless of where they're placed (unless moving the scripts to the bottom gets rid of other blocking issues).
Play around with createSWF (not recommended)
createSWF() doesn't wait for the DOM to be ready. I have little idea of the internal workings of swfobject in terms of DOM manipulation these days, but - in the case of dynamic publishing - it may be possible to call it right after you've added the placeholder. The placeholder part of the DOM is (mostly) ready by that time (see e.g. here).
But that all depends on what other parts of the page swfobject wishes to address behind the scenes these days, and what it may do in future versions. Any DOM manipulation before DOM ready may also cause the browser to render parts twice in some cases, which obviously doesn't help performance. In short, not recommended.
I've been using the plugin in here: http://contextllc.com/tools/jQuery-showLoading which works perfectly when it's an ajax request or any other element interaction but how to get the animation appear when the site is first loading and have it disappear after it finishes loading?
You can use javascripts onLoad event to show the animation and jquery .ready()-function to remove it. More about onload event and more about .ready()-function
When evaluating dojo.require statements, dojo tracks which modules and resources have been required and doesn't download them many times, but takes them from cache.
But what if I require a module lazily, for example, when a button is clicked, - does dojo check its cache?
Yes, the same mechanism is used to make sure a module is not loaded, during page load and after page load, when responding to dynamic events, as long as it is a normal dojo.require("my.module.name") call.