gpt4 book ai didi

lazy-loading - amp-img 未显示在轮播中

转载 作者:行者123 更新时间:2023-12-04 03:58:11 25 4
gpt4 key购买 nike

used用于显示文章摘要列表的 AMP 轮播。

出于某种原因,只有在页面加载时可见的摘要才有图片。

(如果我旋转屏幕更多但不是所有图片都加载。)

我做错了什么?

请随时询问更多信息。

布局如下:

<amp-carousel class="articles-carousel" layout="fixed-height" height="200" type="carousel">
<article role="button" tabindex="1" class="article-abstract" on="tap:AMP.setState({selectedArticle:1072}),AMP.scrollTo('id' = 'article_1072')">
<footer>
<amp-img height="128" layout="fixed" src="/server/929/rabbis/11.jpg" width="128"/>
<div class="article-abstract-author">
<address>
<a rel="author">הרב דוד חי הכהן</a>
</address>
</div>
</footer>
<header>
<a class="article-external-link-container" href="/929/307/1072" target="_blank">
<i class="fas fa-external-link-alt"/>
</a>
<h1>נקודות אור בימי אחאב(2)</h1>
</header>
</article>
<article role="button" tabindex="2" class="article-abstract" on="tap:AMP.setState({selectedArticle:1108}),AMP.scrollTo('id' = 'article_1108')">
<footer>
<amp-img height="128" layout="fixed" src="/server/929/rabbis/24.jpg" width="128"/>
<div class="article-abstract-author">
<address>
<a rel="author">הרב חיים בן סניור</a>
</address>
</div>
</footer>
<header>
<a class="article-external-link-container" href="/929/307/1108" target="_blank">
<i class="fas fa-external-link-alt"/>
</a>
<h1>מלחמת אחאב ובן הדד</h1>
</header>
</article>
<article role="button" tabindex="3" class="article-abstract" on="tap:AMP.setState({selectedArticle:1112}),AMP.scrollTo('id' = 'article_1112')">
<footer>
<amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
<div class="article-abstract-author">
<address>
<a rel="author">הרב צבי שוויגר</a>
</address>
</div>
</footer>
<header>
<a class="article-external-link-container" href="/929/307/1112" target="_blank">
<i class="fas fa-external-link-alt"/>
</a>
<h1>המוותר על דברי נביא</h1>
</header>
</article>
<article role="button" tabindex="4" class="article-abstract" on="tap:AMP.setState({selectedArticle:1113}),AMP.scrollTo('id' = 'article_1113')">
<footer>
<amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
<div class="article-abstract-author">
<address>
<a rel="author">הרב צבי שוויגר</a>
</address>
</div>
</footer>
<header>
<a class="article-external-link-container" href="/929/307/1113" target="_blank">
<i class="fas fa-external-link-alt"/>
</a>
<h1>עונש אחאב</h1>
</header>
</article>
</amp-carousel>

这是样式表:

.articles-carousel {
padding: 1em 0;
}

.article-abstract {
text-align: center;
vertical-align: text-top;
width: 155px;
height: 200px;
}

.article-abstract:focus {
outline: none;
}

.article-abstract:first-child {
margin-right: 12px;
}

.article-abstract header {
display: table;
width: 141px;
max-width: 100%;
}

.article-abstract h1 {
display: table-cell;
font-size: 12px;
line-break: normal;
margin: 0;
text-align: center;
width: 128px;
word-break: break-word;
white-space: normal;
}

.article-abstract footer {
display: inline-flex;
}

.article-abstract-author {
margin: 0px 3px 0 0;
max-width: 12px;
}

.article-abstract-author address {
transform: rotate(-90deg);
}

.article-abstract-author a {
font-size: 11px;
}

.article-external-link-container {
display: block;
width: 16px;
}

可以看到四张图片只出现了三张:

enter image description here

更新:

Bachcha Singh 说这是一个错误。添加后:

.articles-carousel {
direction:ltr;
}
.articles-carousel > div * {
direction:rtl;
}

现在可以了。但是,我很乐意让它至少感觉像 rtl... 将初始位置设置为轮播结束。

更新#2:似乎在 amp-carousel-0.2 中解决了。

最佳答案

你的代码没有问题,经过一些研发我发现这是延迟加载的rtl处理中的一个错误。

目前您可以更改 amp-carousel 的方向并根据需要设置设计,直到 AMP 团队不会修复此错误。

.articles-carousel { direction:ltr; }

如果您可以将 amp-carousel 类型的轮播更改为幻灯片,那么它也可以。

关于lazy-loading - amp-img 未显示在轮播中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54620446/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com