小编use*_*782的帖子

如何推迟内联Javascript?

我有以下HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.js" defer></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw=" crossorigin="anonymous" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js" defer></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer></script>
    <!-- 26 dec flexslider js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js" defer></script>
    <script defer>
    (function($) {
        $(document).ready(function() {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        });
    })(jQuery);
    </script>
</head>
<body>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我收到一个错误,说没有定义jQuery.现在,即使我从我的内联JS代码中删除defer,它也说jQuery是未定义的.出于某种原因,我必须将jQuery插件保留在头部并保持我的JS代码内联.我的问题是:

  1. 为什么内联Javascript代码在defer属性存在时不会延迟?

  2. 有没有办法模仿我的内联Javascript代码的延迟行为?如果需要,我可以将它放在body标签的末尾.

html javascript jquery deferred-execution

44
推荐指数
5
解决办法
3万
查看次数

如何在Sublime 3中设置scss语法?

我正在使用Sublime 3编辑器.当我打开一个SCSS文件时,它会显示许多红色字符,因为它错误地判断了语法.当我按CTRL+ Shift+ P键入sassscss我没有选择.我不得不将语法设置为CSS.

有没有办法在Sublime 3中为SCSS设置语法?

css syntax-highlighting sass sublimetext sublimetext3

34
推荐指数
2
解决办法
3万
查看次数

bootstrap如何在全高清(1920×1080)手机上运行?

所述引导教程说,包括.col-xs-*用于移动设备(<768px).我的问题是,如果我使用.col-xs-*类为小型手机创建一个网站,那么该css规则将仅适用于宽度小于768px的设备.如今有全高清手机,宽度为1080px,5英寸显示屏.那么这些移动设备的行为就像我的bootstrap css的台式计算机(≥992px)一样吗?我希望我的css对于任何5英寸屏幕移动设备都是相同的,无论是高清还是全高清.

css twitter-bootstrap

22
推荐指数
2
解决办法
1万
查看次数

为什么COUNT()只显示一行表?

pet在数据库中有以下表格menagerie:

+--------+-------------+---------+------+------------+------------+
| name   | owner       | species | sex  | birth      | death      |
+--------+-------------+---------+------+------------+------------+
| Tommy  | Salman Khan | Lebre   | NULL | 1999-01-13 | 0000-00-00 |
| Bowser | Diane       | dog     | m    | 1981-08-31 | 1995-07-29 |
+--------+-------------+---------+------+------------+------------+
Run Code Online (Sandbox Code Playgroud)

现在如果我运行以下查询:

select owner, curdate() from pet;  
Run Code Online (Sandbox Code Playgroud)

我得到以下输出:

+-------------+------------+
| owner       | curdate()  |
+-------------+------------+
| Salman Khan | 2016-09-12 |
| Diane       | 2016-09-12 |
+-------------+------------+
Run Code Online (Sandbox Code Playgroud)

输出显示每行的所有值owner和返回的值curdate().

现在,如果我运行以下查询: …

mysql sql database count mysql-5.7

22
推荐指数
2
解决办法
4324
查看次数

CSS像素真的是绝对单位吗?也就是说,1英寸= 96px是真的吗?

W3C官方文档说:

1 px = 1/96th in 1 in

在我以前的18.5英寸的屏幕,screen.width1367 px和英寸屏幕宽度14 inches.按W3C公式:

14 * 96 px = 1344 px

W3C公式偏离了20/14 px per inch.由于偏差太小,1 inch在我的屏幕上97.4 px我接受了W3C公式,并且认为CSS像素是一个absolute unit of measure,意味着它总是等于0.75 pt(物理单位).

这一周,我买了一台21.5英寸全高清屏幕,它具有宽度19 inchesscreen.width1920 px.所以现在1 inch在我的屏幕上是:

1920/19 ~ 101 px

不仅如此,我朋友的屏幕是24英寸,并具有相同的1920 x 1080分辨率.24英寸和21.5英寸都不能对应相同数量的CSS像素.

所以现在,在我的屏幕上,CSS像素不是绝对的测量单位.屏幕上的一切都相对较小.即便如此,现在我被我的字体大小所迷惑.当我在屏幕上找到16 px作为最小可读字体时,它在较小的屏幕上实际上更大.因为16 px我的屏幕14px在我以前的小屏幕上的厘米与厘米相同.我设计我的网站错了,我不再是一个好的前端开发人员了.

所以问题是:

  • CSS像素真的是绝对单位吗?也就是说,1英寸= 96像素是真的吗?

html css browser pixel css3

22
推荐指数
3
解决办法
2125
查看次数

延迟脚本是否在DOMContentLoaded事件之前执行?

在推迟attirbute时,MDN说:

此布尔属性设置为向浏览器指示在解析文档之后但在触发DOMContentLoaded之前要执行脚本.defer属性应仅用于外部脚本.

DOMContentLoaded MDN上也说:

完全加载和解析初始HTML文档时会触发DOMContentLoaded事件,而无需等待样式表 ...

所以DOMContentLoadedCSSOM准备好之前就被解雇了.这意味着延迟脚本在准备好之前执行CSSOM.但如果这是真的,那些scrips必须无法获得正确的css属性值,并且不能正确应用css.但事实并非如此,我们知道所有延迟脚本都能正常运行.

  1. 那么MDN文档在技术上是不正确的吗?
  2. 我在哪里可以找到DOMContentLoaded`的官方文档?我在https://dom.spec.whatwg.org/搜索但找不到它.

PS:请不要谷歌说在执行任何内联javscript之前构建CSSOM

在此输入图像描述

但谷歌在技术上是不正确的.在CSSOM准备好之前,内联JavaScript会被执行.从我的测试中我发现MDN是正确的,如果在css文件(或js是内联)之前下载了js文件(延迟和非延迟),那么在CSSOM准备好之前执行js.所以js可能会错误地处理样式.为了避免这种情况,我们需要在所有js逻辑之前进行强制回流.

因此,如果用户访问我们的网站时所有需要缓存的js和css没有缓存,或者在css之前下载了js,那么他可能会看到错误渲染的页面.为了避免这种情况,我们应该在所有网站的js文件中添加强制重排.

html javascript css dom cssom

15
推荐指数
3
解决办法
5897
查看次数

为什么不能将 ref 传递给 React 中的功能组件?

为什么不能将 ref 传递给 React 中的功能组件?

与无法向其传递引用的类组件相比,函数组件有何不同?

为什么那不可能呢?

注意:我提出这个问题是因为我总是看到有关如何将 ref 与功能组件一起使用的解释,并且您需要使用fowardRef,但没有人解释 React 如何处理功能组件,从而无法将 ref 传递给它,它总是解释如何去做,但从来没有解释为什么你需要这样做。

reactjs react-ref

14
推荐指数
1
解决办法
7744
查看次数

我应该在底部正文标记之前的脚本上使用延迟吗?

每次我将js文件放在页面底部时,这个问题一直困扰着我.如果我把所有js文件放在结束body标记之前的底部,那么我认为浏览器将首先下载所有的html和样式表,然后它将解析html和css,最后它将发送js文件的请求.所以,

  • 使用defer已经在底部的js文件会有什么不同吗?
  • 在body标记呈现阻塞之前,非延迟脚本是否最后?

我的另一个问题是,如果我将所有js文件放在头部并使用defer它们.这相当于将所有js文件放在底部吗?在head浏览器中看到j​​s与延迟会向服务器发出请求,然后继续下载其余的html文件,还是只在下载所有html和css之后才向服务器发出请求?

据我所知async,相当于defer和唯一的区别是js将在不考虑文件顺序的情况下下载时执行.所以,

  • 使用async已经在底部的js文件除了执行它们的顺序之外会有什么不同吗?

html javascript html5 http deferred

12
推荐指数
2
解决办法
2314
查看次数

为什么svg上的转换没有延迟地在DOMContentLoaded上工作?

我有一个svg,其上设置了过渡.现在当我向它添加一个具有一些属性变化的类时,只有在DOMContentLoaded事件和addclass事件之间添加延迟时才会发生转换.这里有两个例子,第一个没有延迟第二个有无限小延迟:

不延误:

! function() {
  window.addEventListener('DOMContentLoaded', function() {
    var logo2 = document.querySelector("svg");
    logo2.classList.add('start');
  });
}();
Run Code Online (Sandbox Code Playgroud)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46">
            <defs>
                <style>
                polygon {
                    fill: red;
                    transition: opacity 3s ease-out, transform 3s ease-out;
                    opacity: 0;
                }

                .start polygon {
                	opacity: 1;
                }
				
				#A1 polygon {
					transform: translate(100px, 100px);
					transition-delay: 1s;
				}

				/*styles after animation starts*/
				.start #A1 polygon {
					transform: translate(0px, 0px);						
				}


            </style>
            </defs>
            <title>Logo</title>
            <g id="A1">
                
                <polygon  class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 …
Run Code Online (Sandbox Code Playgroud)

html javascript css svg css-transitions

12
推荐指数
1
解决办法
723
查看次数

结合图标如何在材料图标中工作?

使用材质图标,可以添加加号图标,如下所示:

<i class="material-icons">add</i>  
Run Code Online (Sandbox Code Playgroud)

文本add不再可见.为什么会发生这种情况?加号图标来自何处?我知道它是在字体文件中定义的,但是怎么样?

如果是由于add与字体文件中的加号图标相关联的单词,那么为什么以下的Bootstrap中没有使用其Glyphicons

<span style="font-family: 'Glyphicons Halflings'">\20ac</span>
Run Code Online (Sandbox Code Playgroud)

css fonts twitter-bootstrap material-design

12
推荐指数
2
解决办法
3050
查看次数