Preload SVG in WordPress

Here’s the code you can use:

function preload_logo_svg($hints, $relation_type) {
    if ('preload' === $relation_type) {
        $hints[] = get_site_url() . '/wp-content/uploads/2019/07/hagemann-systems-logo.svg';
    }
    return $hints;
}
add_filter('wp_resource_hints', 'preload_logo_svg', 10, 2);

### Optional: Add `as` attribute for resource type
If your server supports HTTP/2 Server Push or if you want more control, consider manually adding it in the “ via `wp_head`:

function add_preload_svg_tag() {
    echo '<link rel="preload" href="' . esc_url(get_site_url() . '/wp-content/uploads/2019/07/hagemann-systems-logo.svg') . '" as="image" type="image/svg+xml">' . "n";
}
add_action('wp_head', 'add_preload_svg_tag');

This second method gives you precise control over the preload behavior and ensures it’s visible in the HTML output.

Let me know if you're using a child theme or need this for specific pages only.

Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')

means that `sliderContainer1` is `null`, so when your script runs this line:

const slides = sliderContainer1.querySelectorAll('.multiple-slide');

…it fails because `querySelectorAll` can’t run on `null`.

—

### ✅ How to Fix It

You need to make sure that `sliderContainer1` actually exists in the DOM before trying to use it.

Update your code like this:

const sliderContainer1 = document.querySelector('.your-slider-container-class');

if (sliderContainer1) {
    const slides = sliderContainer1.querySelectorAll('.multiple-slide');
    // proceed with the rest of your logic here
} else {
    console.warn('Slider container not found');
}

—

### 🔍 Common Causes

– The DOM element with that class/id doesn't exist on the page.
– Your script is running **before** the DOM is fully loaded.
– There's a typo in the class or ID you're querying.

—

### ✅ Bonus: Wrap inside `DOMContentLoaded`

If your script is not already wrapped, do this to make sure it only runs after the page is ready:

document.addEventListener('DOMContentLoaded', function () {
    const sliderContainer1 = document.querySelector('.your-slider-container-class');

    if (sliderContainer1) {
        const slides = sliderContainer1.querySelectorAll('.multiple-slide');
        // Your code logic here
    }
});

Let me know what `.your-slider-container-class` actually is, and I can give you a fully tailored snippet.

Uncaught TypeError: Cannot read properties of null (reading '_glider')

…is telling you that the `e` element you're passing into `new Glider(e, options)` is `null`, so it can’t access the `_glider` property.

—

### ✅ Cause

This line:

new Glider(e, t)

…is being called with `e` (the DOM element) being `null`. That usually means the element you’re trying to attach Glider.js to doesn’t exist in the DOM at the time of execution.

—

### ✅ Solution

**Step 1: Ensure the element exists**

Let’s say you are initializing Glider like this:

new Glider(document.querySelector('.glider'), {
  slidesToShow: 1,
  draggable: true
});

Wrap it in a DOM check:

document.addEventListener('DOMContentLoaded', function () {
  const gliderElement = document.querySelector('.glider');
  
  if (gliderElement) {
    new Glider(gliderElement, {
      slidesToShow: 1,
      draggable: true
    });
  } else {
    console.warn('Glider element not found.');
  }
});

—

### ✅ Bonus Tips

– Make sure the element with class `.glider` actually exists in your HTML.
– If you are using multiple sliders, use `querySelectorAll` and loop through them.
– If the slider is loaded via AJAX or after DOM load (e.g., in a tab or lazy load), you must initialize Glider after that content appears.

—

If you share the HTML part or where the Glider is being used, I can refine the fix for you.