Loading a .js file conditionally. How?

Question

First demo is a .js file which is loaded with:
<script src="https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js"></script> https://codepen.io/zuhocuyixu/pen/oqpdWz

The .js adds a nice zooming feature to the image.

Second demo is trying to load the same .js file with head.js. It does not work. https://codepen.io/zuhocuyixu/pen/XEVEwG

Any advice on why this is not working?

Answer 1

I recommend looking through the zooming.js docs

You can initialize the zooming on images like this yourself:

head.ready(document, function() {
    head.load('https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js', function() {
         var zooming = new Zooming();
         zooming.listen('.my-img');
    });
});

and change your html to this:

<img 
    class="my-img"
    style='max-width: 100%;'
    draggable="false" ondragstart="return false;"
    src="https://image.ibb.co/bxRTKn/trees_crop.jpg"
    data-original="https://preview.ibb.co/eRYm5S/trees.jpg"
    alt="test"
/>

Answer 2

If you look at your dev tools, you will find zooming is actually loading.

Your problem is zooming is loaded after your document html has been loaded, so you will need to tell zooming to re-parse,.

I don't personally use Zooming, but try ->

head.load('https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js', function () {
  new Zooming();
});