小编Eri*_*ric的帖子

如何加快我网站的背景图片加载速度?

我正在努力改善我的网站的性能.在Chrome DevTools中,我看到bg2.jpg的请求在开始下载时被延迟了.Chrome DevTools网络瀑布

我认为这种情况正在发生,因为我使用JavaScript生成URL并将其设置为CSS中的背景图像,Chrome浏览器正在优先处理包含此代码的脚本标记.

let bgImgName = "bg" + Math.floor(Math.random() * 5);
...
document.documentElement.style.setProperty("--bgUrl", `url(img/${bgImgName}.jpg)`);
Run Code Online (Sandbox Code Playgroud)

我的想法是在HTML中使用,预加载图像<link rel="preload" href="img/bg2.jpg" as="image">.我的问题是我必须对此URL进行硬编码才能工作(因为我的服务器只运行apache并且没有真正的服务器端语言).我的服务器(在Linux共享主机上使用GoDaddy的主机)确实允许我访问.htaccess文件,并且可能有一种方法可以使用服务器端包含来注入随机数,但我还没有找到一种方法来执行此操作.

有没有办法这样做,或者以不同的方式来解决这个问题?

更新:看起来我不能使用服务器端包含.我忘记了在将HTML文件上传到服务器之前对其进行了gzip,这样就可以直接从磁盘提供压缩的静态文件.

有没有办法在.htaccess文件中添加一个传递给浏览器的随机数?

html javascript css google-chrome web-performance

5
推荐指数
0
解决办法
903
查看次数

在不同设备中使用相同的浏览器会产生不同的"margin-left"结果

我试图在"blablablau"这个词的字母"u"上面放一个图像(一顶帽子).

我期望的结果是:

在此输入图像描述

我用这段代码解决了这个问题:

<img id="img-hat" src="hat.png">
<p id="title-bla">blablablau</p>
Run Code Online (Sandbox Code Playgroud)
#img-hat {
    transform: rotate(25deg);
    position: absolute; 
    margin-left: 118px; 
    height: 23px; 
    width: 37px
}

#title-bla {
    margin-bottom: -5px; 
    font-weight: bold; 
    font-size: 170%; 
    margin-top: 2px; 
    font-family: 'Open Sans',sans-serif
}
Run Code Online (Sandbox Code Playgroud)

问题是,在不同设备中使用SAME浏览器(如chrome),我得到的margin-left结果不同img-hat.

示例:在我的计算机中显示正确.在我的笔记本电脑中它也正确显示.但是,在另一台笔记本电脑(具有相同的屏幕分辨率)中,它会向右侧显示更多的帽子,如下所示:

在此输入图像描述

这种行为在我的手机和我测试的另一台电脑中继续存在.

为什么会这样,我该如何解决?

html css margin

3
推荐指数
1
解决办法
1038
查看次数

由于从未发生过的空条件,闭包编译器认为参数不匹配

我正在使用google 闭包编译器来缩小我的代码,我最近添加了JSDoc 注释以允许编译器进行类型检查和更好的缩小(在高级模式下)。不幸的是,它正在显示警告。有没有一种方法可以更改代码以防止警告,而无需添加闭包编译器注释来抑制它?

JSC_TYPE_MISMATCH: actual parameter 1 of add does not match formal parameter
found   : (Date|null)
required: Date at line 30 character 8
    add(date, 1, "second");
        ^
Run Code Online (Sandbox Code Playgroud)

这是我试图缩小的 JS 代码

JSC_TYPE_MISMATCH: actual parameter 1 of add does not match formal parameter
found   : (Date|null)
required: Date at line 30 character 8
    add(date, 1, "second");
        ^
Run Code Online (Sandbox Code Playgroud)

date instanceof Date检查应处理日期福祉null,使该方法返回FALSE,甚至没有尝试将所有的add功能。不知道为什么 cc 认为我可以传递nulladd函数。在实际代码中,isValidDateObject用在很多地方,所以我不想内联它。

您可以通过使用闭包编译器的在线版本并将优化级别设置为“高级”来缩小我的代码。 …

javascript null types minify google-closure-compiler

3
推荐指数
1
解决办法
511
查看次数

为什么在过去几年中JS文件中更常用单引号?

为什么会出现一种趋势,为人们使用单引号'周围string,而不是双引号"书写时?是否有任何minifcation掉毛下面的工具//周围有双引号的惯例string和周围单一单引号char和使用更好的缩小/绒毛检查?反之亦然?它是来自还是的保留,其中双引号字符串执行单引号字符串更昂贵?

我发现使用双引号通常倾向于创建gzip更好的文件(通过线路传输),因为双引号更常出现,这对于霍夫曼编码更好.

javascript string lint double-quotes single-quotes

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

如何使Angular ui网格最初基于数据扩展行?

我正在使用ui-grid来显示数据列表并在显示网格时我试图根据数据扩展一些行.

我想在onRegisterApi事件中这样做:

scope.GridOptions = {
    data: properties,
    columnDefs: 
    [
        { name: "Full Address", field: "FullAddress" },
        { name: "Suburb", field: "Suburb" },
        { name: "Property Type", field: "PropertyType" },
        { name: "Price", field: "Price", cellFilter: 'currency'},
        { name: "Status", field: "Status" },
        { name: "Sale Type", field: "SaleType" }, 
        { name: "Date Created", field: "CreateDate", cellFilter: "date:'dd/MM/yyyy HH:mma'"}
    ],
    expandableRowTemplate: 'template.html',
    expandableRowHeight: 200,
    onRegisterApi: (gridApi) => 
    {
        gridApi.expandable.expandAllRows();
    }
};
Run Code Online (Sandbox Code Playgroud)

问题是gridApi.expandable.expandAllRows()扩展所有分组部分.我看到有一个expandRow功能,但我不知道如何使用它来代替expandAllRows …

javascript angularjs angular-ui-grid

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