Question

我目前有一个匿名函数，可以很好地在包含jQuery的页面上滑动内容，但当不包含jQuery时，它当然不起作用。

如何通过JavaScript加载jQuery并使其正常工作？

以下是我的尝试：

(function(){
  var c=location.protocol;
  var b=c+"//code.jquery.com/jquery-latest.js";
  var a=document.createElement("script");
  a.type="text/javascript";
  a.src=b;
  document.getElementsByTagName("head")[0].appendChild(a)
})();



(function($){



var css = "html,body {margin: 0px !important;padding: 0px !important;}#popslide {width: 525px !important;height: 250px !important;border: 2px solid #bcbbba !important;border-right: none !important;border-radius: 4px !important;position: fixed !important;bottom: 15% !important;background: #f5f5f7 !important;color: #717175 !important;font-family: 'Helvetica Neue', Helvetica, arial, sans-serif !important;z-index: 500 !important;}#popslide:before {content: '' !important;padding-bottom: 2px !important;border-bottom: 3px solid #dedfdf !important;width: 525px !important;height: 250px !important;display: block !important;position: absolute !important;z-index: -1 !important;border-radius: 3px !important;}#popslide .question {width: 200px !important;position: absolute !important;left: 25px !important;top: 25px !important;}#popslide h1 {font-size: 20px !important;font-weight: 500 !important;color: #545459 !important;}#popslide .question ul {list-style-type: none !important;padding-left: 10px !important;font-size: 13px !important;}#popslide .question ul li {margin-bottom: 6px !important;}#popslide .question input[type='button'] {background: #f12f09 !important;border: none !important;color: #fff !important;font-family: 'Helvetica Neue', Helvetica, arial, sans-serif !important;font-weight: 400 !important;font-size: 13px !important;border-radius: 3px !important;padding: 8px 20px !important;margin-top: 4px !important;margin-bottom: 5px !important;cursor: pointer !important;}#popslide .question ul li a {color: #4c8ae0 !important;font-size: 12px !important;}#popslide .question input[type='button']:hover {background: #d12200 !important;}#popslide .thumb {width: 250px !important;height: 200px !important;position: absolute !important;right: 30px !important;top: 25px !important;cursor: pointer !important;}#popslide #close {position: absolute !important;width: 20px !important;left: 6px !important;top: 6px !important;z-index: 600 !important;cursor: pointer !important;opacity:0.4 !important;filter:alpha(opacity=40) !important;}";

$('head').append('<style type="text/css">' + css + '</style>');

$('body').append(
    '<div id="popslide">'
  + '  <img src="close.png" id="close" />'
  + '  <div class="question">'
  + '    <h1>Was this cat drugged by the government?</h1>'
  + '    <ul>'
  + '      <li><input type="radio" name="vote" class="vote" id="vote1"> <label for="vote1">Probably</label></li>'
  + '      <li><input type="radio" name="vote" class="vote" id="vote2"> <label for="vote2">Yes</label></li>'
  + '      <li><input type="button" class="vote" value="Vote" id="vote3"></li>'
  + '      <li><a href="#" id="results">See results</a></li>'
  + '    </ul>'
  + '  </div>'
  + '  <img src="sail.gif" class="thumb" />'
  + '</div>'
  );

  document.getElementById('popslide').style.right = '-' + 540 + 'px'

  var right = -540

  function frame() {
    right += 10
    document.getElementById('popslide').style.right = right + 'px'
    if (right == -10) {
      clearInterval(id)
    }
  }

  var id = setInterval(frame, 10)

  $('#popslide .vote, #results, #popslide .thumb').click(function() {
    alert('BAM!');
  })

  $('#popslide #close').click(function() {
    $('#popslide').fadeOut();
  })

})($);

Answer 1

你可能只是将jquery包含在脚本标记中，但是在使用它之前需要检查jQuery是否已加载，如：

(function(){  
  var c=location.protocol;
  var b=c+"//code.jquery.com/jquery-latest.js";
  var a=document.createElement("script");
  a.type="text/javascript";
  if( a.readyState ) {
    a.onreadystatechange = function() {
       if( a.readyState == 'loaded' || a.readyState == 'complete' ) {
          a.onreadystatechange = null;
          loaded();
          }
       };
    }
    else {
      a.onload = function() {
        loaded();
    };
  }
  a.src=b;

  document.getElementsByTagName("head")[0].appendChild(a);
})();
function loaded() {
    var jQuery = window.jQuery.noConflict( true );
    jQuery(document).ready(function($) {
        //use $ here for jQuery manipulations
    });
}

Answer 2

我现在能想到的唯一方法（尽管不是很漂亮）是设置一个检查$是否存在的间隔（小一个 - 大约100毫秒）。如果存在，则清除间隔并调用您的函数。

另外，为了改善加载时间，您可能希望使用缩小版本的jquery，因为它更小。而不是//code.jquery.com/jquery-latest.js，请使用//code.jquery.com/jquery-latest.min.js

在匿名函数中调用jQuery

2 个答案: