有条件地加载.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加载相同的head.js文件。它不起作用。https://codepen.io/zuhocuyixu/pen/XEVEwG

对于为什么这不起作用有什么建议吗？

Answer 1

我建议浏览一下zooming.js文档

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

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

Answer 2

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

您的问题是在加载文档html之后加载缩放，因此需要告诉缩放以重新解析。

我个人不使用缩放，但是尝试->

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