Question

我正在尝试根据条件加载插件，如下面的函数所示。但我无法做到。请查看代码并告诉我代码中的错误..

  function loadPlugin(choic)
  {
    var plugin=choic*1;
    if(plugin >= 1 && plugin <= 3)
    {
        $("head").append("<link>");
        css = $("head").children(":last");
        css.attr(
            {
                rel:  "stylesheet",
                type: "text/css",
                href: "/cloud-zoom/cloud-zoom.css"
            });
        alert('CSS Loaded');
        alert($("head").html());
        $.getScript('/cloud-zoom/cloud-zoom.1.0.2.min.js', function() 
        {
            alert($("head").html());
            $('.cloud-zoom').CloudZoom();
            $('a.cloud-zoom').live('click',function(e)
            {
                e.preventDefault();
            });
        });
    }   
   }

由于

Answer 1

$.getScript应该可以正常工作。您的问题可能与CSS有关。仍然没有浏览器范围的方式以干净的方式加载样式表。您的alert('CSS loaded')将永远发生在CSS加载的同时（如果在localhost上运行）或加载之前（不是localhost）。

此外，您可以以不同的方式加载CSS：

$("head").append(
    $("<link>", {
        rel:  "stylesheet",
        type: "text/css",
        href: "/cloud-zoom/cloud-zoom.css"
    })
);

实现此目的的另一种方法是使用$.get()下载CSS然后将其插入一个<style>标签，但那不是很漂亮......

无法使用此功能动态加载CSS和JS

1 个答案: