Intersection Observer Not Working Wordpress 5.8.1 - javascript

I implemented Intersection Observer on my Wordpress site which is on dev mode atm and just the last image at the bottom of the site is lazyloading.
Not sure the reason why that is happening. See below my lazy code.
/*Lazy load images*/
const allViews = document.querySelectorAll("[data-src]");
function preloadImage(img) {
const src = img.getAttribute("data-src");
if (!src) {
return;
}
img.src = src;
}
const options = {
root: null,
threshold: 0,
rootMargin: "0px",
};
const callback = function (entries) {
//console.log(entries);
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
return;
} else {
console.log(entry.target);
preloadImage(entry.target);
observer.unobserve(entry.target);
}
});
}, options);
allViews.forEach((image) => {
observer.observe(image);
});
On another file, I have a jquery script adding the data-src attribute to all images and adding the lazyload class:
/*change img src to img data-src for lazy load*/
$("img").each(function () {
$(this).attr("data-src", $(this).attr("src"));
$(this).addClass('lazyload');
//$(this).removeAttr("src");
//console.log($(this)[0].outerHTML);
});
Any help will be great.

I'm still confused why are you actually using this method because wordpress already has native loading="lazy" support
Javascript might execute in the order it loaded, If the Jquery code
is not loaded before the IntersectionObserver code, Your script
become useless.
you have comment out //$(this).removeAttr("src"); which means, src attribute still exist and the image will be loaded normally. You should uncomment it.
Instead of spending time developing a lazyload you could simply leave to wordpress do it natively lazy load, or use Plugins like W3 Total Cache, which has inbuilt support for Lazy Loading.

Related

Vanta.js not reloading after GSAP & Barba JS transition

Ok so I got a Vanta.js background running in my <main> which looks awesome. Then I introduced a page transition using Barba and GSAP for animations, which are working fine too. But after going back to my index I found that VantaJS isn't loading again. There are very few questions about Barba and even less answered correctly.
Here's what I've tried until now:
Use window.onload with appendChild to add the vanta libraries each time.
Use Barba hooks to reload the libraries on "after" hook.
Send all scripts to the bottom of my html in correct order.
Here are some SO questions I've used as example:
How to reinit custom js files between pages (Barba.js)?
Scripts are not loading after the page transition in Barba.jS
JS content not working after a page transition using Barba.JS
No luck implementing any of these.
I'm open to other transition libraries if you think that Barba is the problem definitely.
Edit #1
So I found my same issue on BarbaJS Github so I tried implementing this inside my barba.init but still no luck:
async beforeEnter(data) {
const nextEl = data.next.container;
if (nextEl) { //Just a little check to make sure we don't run this on an error
// Find all scripts in the next container
const nextScripts = nextEl.querySelectorAll('script');
//Iterate over incoming script tags
nextScripts.forEach(nextScript => {
const src = nextScript.src;
//Duplicate check - no need to re-execute scripts that are already loaded.
if (document.head.querySelector('script[src="' + src + '"]') == undefined) {
//Have to create a new script element in order for the browser to execute the code
const newScript = document.createElement('script');
newScript.src = src;
newScript.async = true;
document.head.append(newScript);
nextScript.remove(); // Cleaning up the script in the container;
}
})
}
},
Edit #2
An attempt loading inline script (that's the way VantaJS is loaded) but for obvious reasons VANTA isn't defined because I'm calling in from an external js file.
window.Barba.currentInlineScripts = [
VANTA.HALO({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: true,
xOffset: 0.18,
scale: window.devicePixelRatio,
scaleMobile: 1.00,
backgroundColor: 0x0A0613,
baseColor: 0x2280D0
})
]
$(function () {
barba.init({
sync: true,
transitions: [
{
afterLeave({
current,
next
}){
if (next.container) {
// Remove old scripts appended to the head
window.Barba.currentInlineScripts.forEach((currentInlineScript) => {
currentInlineScript.remove()
})
// Find all new scripts in the next container
const nextScripts = next.container.querySelectorAll('script');
// Iterate over new scripts
nextScripts.forEach((script) => {
// Check if it is an inline script
if (!script.src) {
// Clone the original script
const newScript = script.cloneNode(true)
// Create a new <script> element node
const newNode = document.createElement('script');
// Assign it innerHTML content
newNode.innerHTML = newScript.innerHTML
// Append to the <head>
const element = document.head.appendChild(newNode)
// Save for later
window.Barba.currentInlineScripts.push(newNode)
}
// Remove the inline script
script.remove()
})
}
},
async leave(data) {
const done = this.async();
pageTransition();
await delay(1000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});

Dynamically loaded CSS in React not working intermittently

I've made a "pluggable" system in React, which dynamically runs tiny "apps" which consist of an HTML, JS and CSS file. The HTML and CSS files are optional. They intercommunicate through the window object.
I'm dynamically loading the three files here, but I'm having the problem that my CSS classes fail to work 1/5 of the time. They don't even seem to get parsed since I cannot manually apply them in Chrome devtools either.
I've tried using both link and style tags to load the CSS, but both have the same problem. Even a 1000ms setTimeout between the CSS and HTML injection doesn't help. CSS parsing consistently fails roughly every third time the component mounts..
I've tried Chrome, Firefox, and Safari. Same problem in all three.
I'm kind of stuck, I'd love to get some feedback on this..
Here is a video of the issue: (the "app" here is a simple SVG file viewer) http://www.giphy.com/gifs/dvHjBBolgA1xAdyRsv
const windowInitialized = useElementBlockInitialization({
id: elementBlockID,
payload: payload,
onResult: onResult
});
const [styleAndHTMLInitialized, setStyleAndHTMLInitialized] = useState(false);
// after some properties are set in Window, run this effect
useEffect(() => {
let gettingStyleAndHTML = false;
if (windowInitialized) {
gettingStyleAndHTML = true;
getStyleAndHTML().then(({ styleBody, htmlBody }) => { // async function that fetches some html and css as a string (both potentially null)
if (gettingStyleAndHTML) {
if (styleBody) {
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.appendChild(document.createTextNode(styleBody));
document.head.appendChild(styleElement);
}
if (htmlBody) {
// containerElement is a ref
containerElement.current.innerHTML = htmlBody;
}
setStyleAndHTMLInitialized(true);
}
});
}
return () => {
gettingStyleAndHTML = false;
};
}, [windowInitialized]);
// after the CSS and HTML is injected, run this hook
useEffect(() => {
if (styleAndHTMLInitialized) {
const scriptElement = document.createElement('script');
scriptElement.setAttribute('data-eb-container-id', containerElementID);
scriptElement.setAttribute('data-eb-id', elementBlockID);
scriptElement.setAttribute('src', makeElementBlockBaseURL() + '.js');
document.head!.appendChild(scriptElement);
return () => {
scriptElement.remove();
};
}
return;
}, [styleAndHTMLInitialized]);
// only render the container once the window properties are set
return windowInitialized ? (
<Container ref={containerElement} id={containerElementID} />
) : null;
I figured it out.
My automatically generated class names occasionally started with a number. CSS class names can not apparently start with a number!
Do'h.

Creating iFrame inside slot for VPAID ad is not rendering DOM of the frame

I've been trying to figure out this issue for quite a long time.
I'm creating VPAID script to support basic VPAID functionality according to the specification.
To display ads I'm taking the slot provided in initAd params and append an iFrame with my video player inside (PlayerJS) to show ads (it's mandatory to use own player for third-party events tracking etc.).
Everything is working well if slot isn't hidden by display CSS property or if its container is not. When it's hidden, the browser won't let the iframe dom to render with js and so player is not starting.
initAd(width, height, viewMode, desiredBitrate, creativeData, environmentVars) {
this._attributes.width = width
this._attributes.height = height
this._attributes.viewMode = viewMode
this._attributes.desiredBitrate = desiredBitrate
this._slot = environmentVars.slot || this.this.emit('AdError', 'Slot is invalid')
this._slotWnd = function(a) {
a = a.ownerDocument
return a.defaultView || a.parentWindow
}(this._slot)
this._videoSlot = environmentVars.videoSlot || this.this.emit('AdError', 'Video slot is invalid')
try {
this.adParameters = JSON.parse(creativeData.AdParameters)
} catch (e) {
console.error('Error parsing AdParameters')
console.log(e)
}
this._slotWnd.addEventListener('message', (event) => { this.eventHandler(event, this) })
this._player = new PlayerFrameIniter(this._slot, this._slotWnd, false, true)
this._player.init( () => this.emit('AdLoaded') )
}
And in PlayerFrameIniter I'm creating an iframe like this:
createIframe(container, url, onFrameLoaded) {
this._frame = this._context.document.createElement('iframe')
const style = {
width: '100%',
height: '100%',
border: 0,
position: 'absolute',
overflow: 'hidden'
}
Object.assign(this._frame.style, style)
this._frame.src = url
this._frame.onload = onFrameLoaded
container.appendChild(this._frame)
}
How can I make frame inside slot render correctly or maybe there's a different approach for this task?
It appeared to be a PlayerJS issue, so the question is no longer actual

Trying to fade in images as they load below the folder

I'm using IntersectionObserver to replace an initially-loaded image with another one as the original image comes into the user's viewport.
I want the image to fade in, as opposed to just straight replacement.
I've tried adding a Jquery loader to the image, but it is not working as I'd like.
function fadeIn(obj) {
$(obj).fadeIn(1000);
}
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
$(lazyImage).on('load', fadeIn(lazyImage));
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img
class="lazy"
src="https://classroomclipart.com/christmas-tree-with-bright-lights-decoration-animated-clipart-motion-lights-gifts-presents-2.gif"
data-src="https://classroomclipart.com/TN_december-happy-holidays_2.jpg"
data-srcset="https://classroomclipart.com/sm-santa-claus-and-reindeer-singing-christmas-carols-clipart.jpg 2x, https://classroomclipart.com/TN_december-happy-holidays_2.jpg 1x"
width="100"
height="100"
>
Here is a solution that works decently well using jQuery animation: https://jsfiddle.net/ea7fxrL5/
There are two problems in your current code as far as I can tell:
The fadeIn function is actually being called before the image's source is changed to the "TN_december-happy-holidays_2.jpg" image because the load event is triggered immediately on intersection, since the image's "christmas-tree" src has already been loaded.
The image is already at full opacity, so it needs to be hidden before you can fade it in.
Hope this helps!

bLazy and Vue.js - DOM not ready fast enough

I am working on simple gallery with pictures. I wanted to use bLazy plugin to load images, all works fine except the fact that I wanted to load image list via external JSON file and because of that images elements are not created fast enough, so when bLazy script is loaded, it can't see images yes.
If I use setTimeout it works, but it is a nasty way of doing things... Any ideas how to refactor my code?
Please note that it work in progress and I will use routers later...
app.js:
var allPics = Vue.extend({
el: function () {
return "#gallery";
},
data: function () {
return {
pics: {},
folders: {
full: "img/gallery/full_size/",
mid: "img/gallery/mid/",
small: "img/gallery/small/",
zoom: "img/gallery/zoom/"
}
};
},
created: function () {
this.fetchData();
},
ready: function () {
setTimeout(function () {
var bLazy = new Blazy({
});
}, 1000);
},
methods: {
fetchData: function () {
var self = this;
$.getJSON("js/gallery.json", function (json) {
self.pics = json;
})
}
}
});
var router = new VueRouter({
});
router.start(allPics, 'body', function () {
});
HTML:
<div id="gallery" class="gallery">
<div v-for="pic in pics.gallery" class="gallery_item">
<div class="img_div">
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src= "{{* folders.mid + pic.name}}"
alt="{{pic.alt}}" >
</div>
</div>
You might want to check https://github.com/aFarkas/lazysizes, it detects DOM changes automatically, so you don't have to do any setTimeout hacks.
Only add the script and add the class lazyload as also use data-src instead of src and you are done.
I am also working with a small gallery of images and using image-background on divs instead of < img > tags since they offer more control over nested elements positioning and allows to use background-size: cover property.
What i do to preload images is something like this:
var imageUrl = ....
var img = new Image();
img.onload = function() {
this.$els.divId.style.backgroundImage = "url(" + imageUrl + ")";
$(this.$els.divId).fadeIn(1000); // fade in div using jquery
};
img.src = imageUrl;
That way when the image is loaded and cached in the browser i can fade in the image div for a smooth effect.
Note that the divId element is hidden (using display: false) from the start and no background-image property is assigned.
Also onload event should be set before assigning imageUrl to img.src so you don't miss the onload event if the image is already cached.
This functionality can also be added to a mixin or an utils class and keeps things simple. It can also adapted to < img > by setting the onload listener, fadeIn and src on an existing img element.
You can trying to revalidate: "blazy.revalidate()", after fetch function.Or to revalidate in the "updated". I was helped.
Use Vue.nextTick. Reference.
Defer the callback to be executed after the next DOM update cycle
Vue.nextTick(() => {
new Blazy();
});

Categories