1

我一直在调整 featherlight.js 以启用 srcset。在 contentFilters: image: 我这样设置图像参数（请忽略笨拙的编码风格）：

var basepath = a.substr(0, a.lastIndexOf('/'));
var basefile = a.substr(a.lastIndexOf('/') + 1);
var b = d.Deferred(),
    c = new Image,
    e = d('<img src="' + a + '" alt="" class="' + this.namespace + '-image" sizes="100vw" srcset="' + basepath + '/1920/' + basefile + ' 1920w, ' +basepath + '/1280/' + basefile + ' 1280w, ' + basepath + '/640/' + basefile + ' 640w"/>');

变量“a”是文件 url。

原则上，这工作得很好。FF、Chrome 和 Safari 识别列出的来源并根据窗口宽度从不同文件夹加载图像。

但是，我遇到了一些在所有浏览器中都会出现的神秘行为。源图像通常根本不会显示，尤其是在调整窗口大小以便选择新源之后。显然，onload 事件在每种情况下都会触发，但图像不会显示。然后关闭并重新打开灯箱或调整浏览器窗口的大小将有助于绘制图像。显然，一旦图像加载到浏览器缓存中，这些问题就会消失。

我一直在尝试各种技巧来强制重绘或重新加载，但无济于事。欢迎任何关于可能发生的事情的线索。

4

0 回答 0