問題タブ [picturefill]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
image - レイジーサイズによるピクチャフィルとレイジーローディング
lazysizesとpicturefillを使用して遅延読み込みを機能させようとしています。
基本的なイメージを使用するだけで、遅延読み込み自体が機能します。
Chrome のネットワーク タブを確認すると、赤い線の後に画像が読み込まれていることがわかります。すべて問題ありません。
ここで、レスポンシブ画像を含む要素を追加し、<picture>それも遅延してロードしようとしました:
残念ながら、この画像は遅延読み込みではなく、直接読み込まれます。
また、絵素画像で src を 1 つだけ使用してみましたが、違いはありません。
lazysizes doc によると、これを一緒に機能させることができるはずなので、細部が欠けているだけだと思いますか?
更新: Lazysizes と Picturefill は両方とも にロードされます<head>。
firefox - ピクチャ要素が angular2 と firefox で機能しない
基本的に画像要素を書き出す「ロゴ」コンポーネントがあります。テンプレートは次のようになります。
angular2 では、これにより生成されます
Chrome ではこれはうまく機能しますが、Firefox ではモバイル画像のみが読み込まれます。タグは Angular の外部で正常に読み込まれます。Web インスペクターを使用して角度属性を削除すると、すべて正常に動作するので、ブラウザーのバグだと思いますが、ここに投稿して、他の人に問題があるかどうか、または回避策があるかどうかを確認したいと思いました。
javascript - Railsアセットパイプラインでpicturefillをプリコンパイルする方法
ポリフィルのピクチャフィルを使用して、img属性のサポートを追加し、IE などのブラウザーでsrcset使用しています。sizesRails のアセット パイプラインで JavaScript をプリコンパイルする場合、このポリフィルは機能しません。<body>パイプラインから除外し、タグの最後に含める (picturefill) と機能します。
私の推測では、ページが完全に読み込まれる前に (すべての「img」タグを使用して)、picturefill が実行されます。これは正しいです？もしそうなら、なぜ作成者は document.ready() イベントのようなものを追加しなかったのですか? 体の最後にスクリプト全体を含めるよりも、これをよりエレガントに解決できる方法はありますか? このようにスクリプトを追加すると、パフォーマンスが大幅に低下するようです。
html - HTML5 Picture 要素は Chrome 52 でサポートされていないようです? ソースセットが機能しない
新しい Web ページを開始したばかりなので、確認するマークアップはあまりありません。
私はこれを設定しました：
ウィンドウの幅に関係なく、デフォルトで medme.jpg 画像になります。私はこれを設定しました：
img フォールバック タグをコメント アウトしても、何も表示されません。
画像要素をサポートする Chrome 52 を実行しています。しかし、それをサポートしていないかのように動作しているようです。ここで何が間違っていますか？
html - Picture 要素 - レスポンシブ img クラスを適用する場所
次の画像要素があるとします。
中間の画面幅がある場合、画像が応答しない（たとえば、親要素がオーバーフローする）のは当然のことです。
すぐに行うべきことは、次のクラスを適用することです。
では、このようなクラスを正確にどこに適用する必要があるのでしょうか? <source>？_ で<img>？で<picture>？どこにでも？
javascript - Picturefull/Lazysizes: IE でプロパティ プッシュを取得できません
レスポンシブ画像の回避策としてpicturefillを使用し、画像の遅延読み込みにlazysizesを使用していますが、かなりうまく機能します。現在、Internet Explorer (11) のコンソールにいくつかのエラーがあります。
メッセージのプリントスクリーン:
候補がnullまたは未定義のようですが、他の場所でも機能し、IEの画像やHTMLに目に見えるエラーがないため、特定できません。エラーは、lazysizes が使用されている場合にのみ発生します。picturefill のみでは、これは当てはまらないようです。
lazysizes で picture 要素を使用する方法の例を次に示します。
ピクチャフィル スクリプトは、次のように、requireJS を使用してフッターに読み込まれます。
lazysizes スクリプトもフッターに読み込まれます。ピクチャフィルの前にロードされます。
ここで何が問題なのかについてのアイデアはありますか? 私は何が欠けていますか？
更新: ここでエラーが発生したようです (picturefill.js):
2 番目の変数は、未定義であるというエラーをスローする候補として使用されます。
html - 使用時にデフォルトの画像のみが表示されます
<picture>and<source>要素を使用して、サイトにレスポンシブ画像を提供しようとしています。
私の問題は、デフォルトの画像しか表示されないことです。さまざまなウィンドウ サイズを使用してページをリロードしようとしましたが、PictureFill もロードしました。
私は何を間違っていますか？
注意: この問題が発生している間、私は Chrome を使用していました
html - ウィンドウ サイズに基づいて画像を変更する
VS2015 サイトに、デスクトップでは作成した横長の画像を表示し、モバイル デバイスでは縦長の画像を表示したいと考えています。サイズの歪みを避けるために、2 つの別々のトリミングされた画像があります。非表示または表示するメディア クエリで css を使用しようとしましたが、常に両方の画像が表示されました (ページのサイズを変更するための他のメディア クエリは正常に動作します)。画像タグを試しました：
画像の塗りつぶしをダウンロードし、これをヘッダーに追加しました
まだ成功していません。初心者の質問で申し訳ありませんが、単純なアイデアのように見えるものについて何か助けていただければ幸いです。
グレッグ