标签: picturefill

(先发制人的罢工:如果你想把它标记为副本,请注意其他问题似乎在问"为什么我会收到这个错误？"我知道为什么我会收到这个错误;我想知道我是怎么回事可以检测我的JavaScript代码中的错误.它只出现在Firebug控制台中,当然,在加载图像时对用户来说是显而易见的.)

我正在使用picturefill来响应图像.我有一个针对图像上的load事件触发的回调.因此,每当有人调整浏览器窗口大小以便通过图片填充加载不同的图像时,回调就会运行.

在回调中,我正在通过画布将图像数据转换为dataURL,这样我就可以将图像数据缓存在localStorage中,这样即使用户离线也可以使用它.

请注意关于"离线"的部分.这就是为什么我不能依赖浏览器缓存.HTML5离线应用程序缓存无法满足我的需求,因为图像是响应式的.(有关响应图像与HTML脱机应用程序缓存不兼容的说明,请参阅"应用程序缓存是一个Douchebag".)

在Mac上的Firefox 14.0.1上,如果我将浏览器的大小调整到非常大的值,然后在大图像有机会完全加载之前将其重新调整为较小的值,则会激活加载图像.它最终报告Firebug控制台中的"图像损坏或截断",但不会引发异常或触发错误事件.代码中没有任何错误迹象.就在Firebug控制台中.同时,它在localStorage中存储截断的图像.

如何在JavaScript中可靠有效地检测此问题,以便我不缓存该图像？

以下是我遍历picturefill div以查找picturefill插入的img标签的方法:

    var errorLogger = function () {
        window.console.log('Error loading image.');
        this.removeEventListener('load', cacheImage, false);
    };

    for( var i = 0, il = ps.length; i < il; i++ ){
        if( ps[ i ].getAttribute( "data-picture" ) !== null ){

            image = ps[ i ].getElementsByTagName( "img" )[0];
            if (image) {
                if ((imageSrc = image.getAttribute("src")) !== null) {
                    if (imageSrc.substr(0,5) !== "data:") {
                        image.addEventListener("load", cacheImage, false);
                        image.addEventListener('error', errorLogger, false);
                    }
                }
            } …

我正在使用一些促销/广告滑块与WP Analytics点击事件在WP网站上工作.效果很好,现在我想在正确的分辨率上提供正确的图像.

我正在使用picturefill来提供图像.硬编码时工作正常,所以我知道它有效.当我试图获取WP上传的图像的图像源时没有.我知道这是因为我的(缺乏)PHP技能.

图片需要什么:

<span data-picture data-alt="">
    <span data-src="filename_default.jpg"></span>
    <span data-src="filename_small.jpg" data-media="(min-width: 400px)"></span>
    <span data-src="filename_medium.jpg" data-media="(min-width: 768px)"></span>
    <span data-src="filename_big.jpg" data-media="(min-width: 1200px)"></span>

    <!-- Fallback content for non-JS browsers. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="">
    </noscript>
</span>

我有url或id或图像存储在:$ attachment_id

我以为这样做:

<?php
    $attachment_id = get_field('advimg');
    $large = "adv-pos-a-large";
    $default = "adv-pos-a-default";
    $small = "adv-pos-a-small";

?>

所述get_field( 'advimg'); 来自ACF.

<span data-picture data-alt="">
    <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $default ); ?>"></span>
    <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $small ); ?>" data-media="(min-width: 400px)"></span>
    <span data-src="<?php …

我有两张图片，一张是 1000 x 800 像素（“大”），一张是 200 x 200 像素（“小”）。我想使用srcset /尺寸/ picturefill显示小画面时的画面小于或等于500个CSS像素宽，并且大的图像除外。

这是一个稻草人的提议：http : //jsfiddle.net/ghhjfo4z/1/embedded/result/

<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w">

这在我的 1x 像素密度显示器上运行良好。但是当我切换到我的 2x 像素密度视网膜显示器时，突然只有当视口小于或等于 250 CSS 像素宽时才会显示小图像。

当视口小于或等于 500px 时，有什么方法可以让浏览器在我的 2x 像素密度显示器上使用小图像？

基本上我想忽略设备的像素密度，并使用srcset和/或尺寸仅根据视口的 CSS 像素宽度选择图像。

我正在使用picture带有source's 的元素来选择要加载的图像.虽然我可以添加一个load监听器,但我无法确定哪个图像被加载,因为img标签的src属性和属性都是空的,即使加载时也是如此!

<picture>
      <source srcset="images/test1.png" media="(min-width: 64em)">
      <source srcset="images/test2.png" media="(max-width: 63.99em)">

      <!-- This will alert an empty string "" -->
      <img srcset="images/test.png" alt="" onload="alert( this.src );">
</picture>

如何确定加载了哪个图像？

我有一个"徽标"组件,它基本上写出了一个图片元素.模板看起来像这样:

<picture class="logo">
<source srcset="{{srcsetMobile}}" media="(max-width: 767px)">
<source srcset="{{srcsetDesktop}}" media="(min-width: 768px)">
<img class="logo" title="{{title}}" alt="{{alt}}" src="{{fallbackSrc}}"
</picture>

在angular2中产生

<picture _ngcontent-lox-3="" class="logo">
<source _ngcontent-lox-3="" media="(max-width: 767px)" ng-reflect-srcset="/assets/img/Logo-mobile.png" srcset="/assets/img/Logo-mobile.png"></source>
<source _ngcontent-lox-3="" media="(min-width: 768px)" ng-reflect-srcset="/assets/img/Logo.png" srcset="/assets/img/Logo.png"></source>
<img _ngcontent-lox-3="" class="logo" ng-reflect-title="title" title="title" ng-reflect-alt="alt text" alt="alt text" ng-reflect-src="/assets/img/Logo-mobile.png" src="/assets/img/Logo-mobile.png">
</picture>

在Chrome中这很好用但在Firefox中只加载移动图片.标签在Angular之外加载很好.当我使用Web检查器并删除角度属性时,一切正常,所以我认为它是一个浏览器错误,但我想我会在这里发布,看看其他人是否有问题,或者有人有解决方法.

我需要重新使用图片元素的渲染图像.是否有直接的方法使用javascript访问chrome/opera呈现的图像文件路径,而无需复制picturefill完成的逻辑.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" >
</picture>

使用上面的示例,在宽度为1200像素的视网膜桌面浏览器窗口上,带有图片支持的浏览器将渲染head-2x.jpg.或者,如果我在带有视网膜显示屏的宽度小于450像素的智能手机上使用Chrome浏览器,它将使用head-fb-2x.jpg.如何直接访问此动态渲染图像？

有没有办法访问这个渲染的图像,而不必自己解析源元素？

我正在使用带有响应图像的Bootstrap.我想通过向浏览器提供多种图像大小来优化加载时间.根据这篇文章,像这样的srcset的简单方法有利于让浏览器选择最佳图像大小:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

我的问题是将它与Bootstrap img-responsive类相结合,即使只需要一个小的图片,也会加载一个大尺寸的图片.

这里的代码示例:Bootply.使用Chrome进行测试,它内置支持srcset支持!(其他一些浏览器需要picturefill.js来识别它.)

如果您复制图像的来源(或在"网络"选项卡中查看Chrome开发者工具),您可以看到750宽度版本被加载,并调整为小图像,即使有较小的版本是最佳的使用.(如果加载picturefill JS来支持img srcset,那么在IE和Firefox中也会发生同样的事情.)

我究竟做错了什么？

我在 React 中遇到了“图片”元素的问题，特别是在 safari 浏览器中。Safari 始终从“img”元素 src 获取图像，并根据媒体属性从适当的“source”元素获取图像。

这似乎在其他浏览器（chrome 和 firefox）中工作正常。

我为此创建了一个codesandbox 。

将不胜感激任何帮助。提前致谢。

仅供参考：我也尝试过使用 picturefill polyfill。但没有帮助。所以，我认为这与 React + Safari 引擎组合有关。

我刚刚开始一个新的网页,所以没有太多的标记要经过.

我把它放下:

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
    <img src="images/smallme.jpg"alt="hero profile">
</picture>

并且无论窗口的宽度如何,它都默认为medme.jpg图片.我记下这个:

<picture>
    <source media="(min-width: 1000px)"
            srcset="images/largeme.jpg">
    <source media="(min-width: 465px)"
            srcset="images/medme.jpg">
   <!-- <img src="images/smallme.jpg"alt="hero profile">-->
</picture>

评论出img后备标签并没有显示任何内容.

我正在运行Chrome 52,它应支持图片元素.但它似乎表现得好像它不支持它或其他东西.我在这做错了什么？

我正在使用如下代码：

<picture class="image-holder">
    <source srcset="some_img.webp" media="screen and (max-width: 1200px)">
    <source srcset="some_img.webp" media="screen">
    <source srcset="some_img.jpg" media="screen and (max-width: 1200px)">
    <source srcset="some_img.jpg" media="screen">
    <img srcset="default_img.jpg" alt="">
</picture>

我希望当像某些版本的 Safari 这样的浏览器不支持 Webp 图像格式时，根据媒体查询回退到以下源，而不是直接到 "default_img.jpg" 。

但取而代之的是，我得到的是直接后备：

<img srcset="default_img.jpg" alt="">

有谁知道我做错了什么？

我已经使用Picturefill在我的网页上加载了几张图片.它们在Chrome中正确显示,但在Internet Explorer 8中根本不显示.

以下是我的代码示例:

<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/modernizr.custom.11641.js"></script>
<script async="true" src="js/picturefill.js"></script>
<script src="js/respond.js"></script>
</head>

<body>
<div class="wrapper">
    <header class="x-padding inside-b-padding">
        <h1 class="nocontent outline">Baseball for Busy
        People</h1>


    <picture class="logo">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="images/logo.png" media="(min-width: 750px)">
        <!--[if IE 9]></video><![endif]-->
        <img srcset="images/logo-small.png" alt="Baseball for Busy People">
    </picture> 

(我包括顶部,以防我的文件链接是问题的一部分).

我可以在IE 8中查看演示:http://scottjehl.github.io/picturefill/examples/demo-02.html.但是我页面上的图像不起作用.

这是我尝试过的:

1. 我将演示中的代码复制并粘贴到我的页面中(将图像路径更改为绝对路径) - 它们没有显示.
2. 我添加了脚本来创建一个<picture>元素(虽然我使用的是Modernizr,所以不需要它).

3. 我添加了一个src路径到img标签,这有用,但我读到Picturefill不推荐这个.

我正在尝试使用lazysizes和picturefill进行延迟加载.

如果我只使用基本图像,延迟加载本身就有效:

<img class=lazyload data-srcset="http://placehold.it/301x301">

如果我检查chrome中的网络选项卡,我可以看到图像是在红线后加载的,所以一切都很好:

现在我添加了一个<picture>带有响应式图像的元素,并尝试加载也是懒惰的:

<picture>

    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/1370x301 1x, http://placehold.it/2055x450 2x" media="(min-width: 1024px)" />
    <source srcset="http://placehold.it/1023x300 1x, http://placehold.it/1534x450 2x" media="(min-width: 768px)" />
    <source srcset="http://placehold.it/767x300 1x, http://placehold.it/1151x450 2x" media="(min-width: 384px)" />
    <!--[if IE 9]></video><![endif]-->

    <img
            class="lazyload"
            style="width: 100%; max-width: 100%;"
            alt="Sample pic"
            data-srcset="http://placehold.it/383x300 1x, http://placehold.it/575x450 2x"
    />

</picture>

不幸的是,这个图像不是延迟加载,而是直接加载:

我也尝试在图片元素图片中只使用一个src,但这没有什么区别.

根据lazysizes文档,应该可以将这项工作结合在一起,所以我想我只是错过了一个小细节？

更新:Lazysizes和Picturefill都加载了<head>.