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后加载了缩放，因此您需要告诉缩放重新解析，。

我不会亲自使用缩放，但请尝试 - ＆gt;

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文件。怎么样？

2 个答案: