在浏览器窗口调整大小事件上有条件地加载和卸载.js文件

时间:2018-04-05 12:55:43

标签: javascript html

用例#1:
如果浏览器宽度大于500px,以下演示将为图像加载缩放功能。

https://codepen.io/zuhocuyixu/pen/NYLZrY

 <!-- Loading .js file with Head.js
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.js"></script>
        <script>
          if (window.innerWidth > 500) {
            head.ready(document, function() {
              head.load('https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js', function() {
                   var ZoomingIsLoaded = true;   
                   var zooming = new Zooming();
                   zooming.listen('.value-img');
                   });
              });
            }
          else {
            var ZoomingIsLoaded = false;
          }
        </script>


    <script type="text/javascript">
      var myVar="ReCheckIfZoomingShouldBeLoaded";
        function ReCheckIfZoomingShouldBeLoaded() {
          if (window.innerWidth > 500 && ZoomingIsLoaded == false) {
                    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('.value-img');
                           var ZoomingIsLoaded = true;
                           });
                      });
          }
        }
    </script>

用例#2:
如果宽度小于500px则不会加载缩放,虽然在浏览器调整大小时它会检查宽度是否大于500px然后加载缩放功能。



问题在于,一旦它加载了缩放功能,它就会出现问题并且在关闭时会出现奇怪的现象。

如何修复这个故障的任何想法?

如果有人知道如果浏览器宽度低于500px,如何卸载缩放功能,那将非常有帮助。

0 个答案:

没有答案