有条件地加载 .js 文件。如何？

Question

第一个演示是一个 .js 文件，其中加载了：
<script src="https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js"></script> https://codepen.io/zuhocuyixu/pen/oqpdWz

.js 为图像添加了一个很好的缩放功能。

第二个演示正在尝试加载与 head.js 相同的 .js 文件。这是行不通的。 https://codepen.io/zuhocuyixu/pen/XEVEwG

关于为什么这不起作用的任何建议？

Answer 1

如果您查看您的开发工具，您会发现 zooming 实际上正在加载。

您的问题是缩放是在您的文档 html 加载后加载的，因此您需要将缩放告诉 re-parse,.

我个人不使用 Zooming，但试试 ->

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

Answer 2

我建议浏览 the zooming.js docs

您可以像这样自己初始化图像缩放：

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');
    });
});

并将您的 html 更改为：

<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"
/>

有条件地加载 .js 文件。如何？

Loading a .js file conditionally. How?

javascript

head.js