Question

我在开发的WP主题中有一个JavaScript，它隐藏了<p>标记内的部分文本和＃34;更多＆＃34;。我将Jquery设置为在标头中加载async，但由于某种原因，它在Firefox上运行良好，但在Chrome上运行不正常。根据我的理解，将async属性与所有独立脚本一起使用总是好的。

部首：

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script async src="https://use.fontawesome.com/726be72ac8.js"></script>
<script  async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

提供隐藏文字功能的JavaScript代码就在开始<body>之后。这样我保证在加载<p>标记之前执行它：

<script>
$(document).ready(function() {
    var showChar = 150;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
</script>

标签：

<p class="more">Text goes here</p>

如果我删除了异步属性，它在Chrome上运行正常。

Answer 1

添加异步告诉浏览器可以在代码之后运行jQuery脚本 - 虽然这不能保证，并且只要浏览器决定运行脚本，脚本就可以运行。因此，即使它适用于Firefox，它也不适用于这种情况。

如果Jquery加载为异步，为什么这个Javascript代码无法在Chrome上运行？

1 个答案: