有些网站有很多图像,所以延迟加载似乎适合减少加载时间和数据消耗.但是如果你还需要支持该网站的打印呢？

我的意思是,您可以尝试检测打印事件,然后加载图像,如下所示:

HTML

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

注意:这是一个一个像素的gif虚拟图像.

JavaScript的

window.addEventListener('DOMContentLoaded', () => {
  img = document.querySelector('img');
  var isPrinting = window.matchMedia('print');
  isPrinting.addListener((media) => {
    if (media.matches) {
      img.src = 'http://unsplash.it/500/300/?image=705';
    }
  })
});

注意:如果您在代码游乐场中尝试此操作,请删除该DOMContentLoaded事件(或简单地分叉这些:JSFiddle | Codepen).

注:我没有事件与麻烦onbeforeprint,并onafterprint为明显的原因.

如果图像被缓存,这将工作正常,但再次,这恰恰不是重点.图像应全部加载,然后出现在打印屏幕中.

你有什么想法？有没有人成功实现了打印就绪的延迟加载插件？

更新

我已经尝试在检测到打印对话框后将用户重定向到网站的标记版本,即website.com?print=true停用延迟加载并且所有图像正常加载.

通过window.print()在该标记的打印就绪版本的页面中应用该方法,在所有图像加载完成后打开新的打印对话框,并在页面顶部同时显示"等待"消息来改进该方法.

重要提示:此方法已在Chrome中进行过测试,但在Firefox和Edge中无效(因此,这不是一个答案,而是一个证词).

它适用于Chrome,因为当您重定向到另一个网站时,打印对话框会关闭(在这种情况下,相同的网址会被标记).在Edge和Firefox中,打印对话框是一个实际的窗口,它不会关闭它,使其无法使用.

我有兴趣使用JavaScript WebAudioAPI来检测歌曲节拍,然后在画布中渲染它们.

我可以处理画布部分,但我不是一个很大的音频人,真的不明白如何在JavaScript中制作节拍探测器.

我已经尝试过这篇文章但是,对于我的生活,我不能连接每个函数之间的点来制作一个功能程序.

我知道我应该向你展示一些代码,但说实话,我没有任何代码,我所有的尝试都失败了,并且在前面提到的文章中有相关的代码.

无论如何,我真的很感激一些指导,甚至更好的演示如何实际检测歌曲节拍WebAudioAPI.

谢谢!

所以,我认为这将是非常直接的,曾经是一个DOMNodeRemoved事件,但是已经弃用了,相反,MutationObserver应该被使用,事情是,它不会触发,即使是适当的配置.

根据这篇关于从变异事件迁移到变异观察者的文章,检测节点的dom去除的配置是{ childList: true, subtree: true },并且这适合给予这childList是必须的并且subtree意味着它将捕获突变不仅仅是目标,而且还要根据目标的后代来观察到mdn文章.

无论如何,我已经做了一个jsfiddle的问题,它是非常直接的,<button>删除<div>和观察者应该记录变异记录,但它没有,看看你能搞清楚:)

HTML

<div>Oh my god karen, you can't just ask someone why they're white.</div>
<button>^Remove</button>

JavaScript的

div = document.querySelector("div");
callback = function(records){
    console.log(records);
}
config = {
    childList:true,
    subtree:true
}
observer = new MutationObserver(callback);
observer.observe(div,config);

button = document.querySelector("button");
button.addEventListener("click",function(){
    div.parentNode.removeChild(div);
});

谢谢!

在使用音频元素（<audio>）或contexts（AudioContext）时，您可以检查它们的currentTime属性以确切了解缓冲区的播放时间。

在我一次创建多个源（或AudioBufferSourceNode）之前，所有这些都是不错的选择AudioContext。

音源可以在不同的时间播放，因此我需要知道它们对应currentTime的，以说明：

一些基础代码供您解决：

buffer1 = [0,1,0]; //not real buffers
buffer2 = [1,0,1];

ctx = new AudioContext();

source1 = ctx.createBufferSourceNode();
source1.buffer = buffer1;
source1.connect(ctx.destination);
source1.start(0);

source2 = ctx.createBufferSourceNode();
source2.buffer = buffer2;
source2.connect(ctx.destination);
setTimeout(1000/*some time later*/){
    source2.start(0);
}

setTimeout(1500/*some more time later*/){
    getCurrentTime();
}

function getCurrentTime(){
    /* magic */
    /* more magic */
    console.log("the sources currentTime values are obviously 1500 (source1) and 500 (source2).");
}

这不是这个问题的重复。

我想制定自己的规则，markdown parser类似于 StackOverflow 中的规则。

这意味着，转换*italic*为<span style="font-style:italic">italic</span>.

我知道那里有很多解析器，但我不理解它们。前面提到的问题并没有真正让我继续下去，它只是链接到更多的解析器，并没有解释它们是如何工作的。

所以我想知道创建一个完整的 Markdown 解析器的基础知识或逻辑，如果你认为向我解释它不是一项令人愉快的任务，那就不要了。感谢您的理解 ：）

我想"ping"服务器,检查标头响应以查看链接是否损坏,如果没有损坏,实际下载响应正文.

传统上,对模块使用同步方法requests,您可以get使用stream = True参数发送请求,并在响应主体下载之前捕获标头,在出现错误(例如,未找到)时决定中止连接.

我的问题是,使用异步库执行此操作,grequests或者requests-futures对于我减少的知识库而言已经无法实现.

我已经尝试将stream参数设置为true request-futures但没有用,它仍然会下载响应正文,而不会让我在获得响应标头后立即进行干预.即使它确实如此,我也不确定如何继续.

这就是我尝试过的:

test.py

from requests_futures.sessions import FuturesSession

session = FuturesSession()
session.stream = True

future = session.get('http://www.google.com')
response = future.result()
print(response.status_code) # Here I would assume the response body hasn't been loaded

经过调试,我发现它以任何一种方式下载响应体.

我会很感激最初问题的任何解决方案,无论它是否符合我的逻辑.

我正在关注使用css 属性的mozilla文档clip-path来应用svg clipPath一个HTMLElement.但由于某种原因,它不适合我,不是div而不是图像.

在文档中,它表示您可以使用以下代码轻松剪辑元素:

<style>.target { clip-path: url(#c1); }</style>
<svg:svg height="0">
  <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
    <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
    <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
  </svg:clipPath>
</svg:svg>

我试过了,但它不起作用.该clip-path属性使用预定义的方法,如polygon()和ellipse(),但它不适用于链接的svg.

我做了一个JSFiddle来说明我的问题,希望你能找到我的错误:)

这个正则表达式/{(\w+)}/g应该匹配花括号之间的每个单词字符{}.相反,我在Regex101 JavaScript引擎和Chrome控制台中获得了不同的结果.

Regex101按预期工作,并且该.match函数在没有g标志的情况下工作,但是一旦我应用它就无法在花括号之间检索内容(它应该获取["asd","asd2"],而是取回["{asd}","{asd2}"])

为什么会这样？谢谢!

目标很简单,使用鼠标滚轮,放大到特定点(鼠标所在的位置).这意味着在缩放后,鼠标将与图片大致相同的位置.

(纯粹是说明性的,我不在乎你是否使用海豚,鸭子或麦当娜的形象)

我不想使用画布,到目前为止我尝试过这样的事情:

HTML

<img src="whatever">

JS

function zoom(e){
    var deltaScale = deltaScale || -e.deltaY / 1000;
    var newScale = scale + deltaScale;
    var newWidth = img.naturalWidth * newScale;
    var newHeight = img.naturalHeight * newScale;
    var x = e.pageX;
    var y = e.pageY;
    var newX = x * newWidth / img.width;
    var newY = y * newHeight / img.height;
    var deltaX = newX - x;
    var deltaY = newY - y;
    setScale(newScale);
    setPosDelta(-deltaX,-deltaY);
}

function setPosDelta(dX, dY) {
    var imgPos …

我想知道如何在半透明的图像周围绘制边框，即我不需要框形边框，也不需要边框半径，而是实际适用于图像本身形状的边框。

根据这篇文章这是不可能的，这个只是建议在某些照片编辑程序（例如 Photoshop）中编辑图像。

但是如果图像输入不是我的呢？如果我需要将一系列用户输入的图像处理到我的网站并添加该边框，则该软件选项将不起作用。

解决这个问题的一种方法是使用画布，但是没有一种纯粹、简单的 css 方法来做到这一点吗？谢谢。

所以我一直试图为一些不同颜色的文本制作挥动动画,因为我正在使用<clipPath>和-webkit-clip-path.在.holderdiv包含在灰色彼此具有相同的文字,在一个白色,一个的顶部的两个元素,并且clip-path被施加到后面.

问题是我需要<path>坐标与文本的大小成比例.这是一个小提琴演示.

• 我试过设置一个viewBox="0 0 100 100",它不起作用.

• 我也试过使用,clipPathUnits="objectBoundingBox"但它似乎在这种情况下不起作用,我猜是因为文本是display:inline.

现在,如果这些似乎过于复杂的分析,并了解基本概念,并愿意做你的方式,去了,我是这样开在这一点上的建议.

另外,我试图避免JavaScript这样做,但如果你必须,继续,没问题:)

这是原始代码:

HTML

<div class="container">
    <div class="holder">
        <div class="back">Text</div>
        <div class="front">Text</div>
        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            <clipPath id="path">
                <path fill="transparent" stroke="black" >
                    <animate 
                        attributeName="d" 
                        attributeType="XML" 
                        values="M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 40, 50 50 T …