Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<amp-img /> doen't init when it roll into viewport. #25789

Closed
meistudioli opened this issue Nov 27, 2019 · 5 comments
Closed

<amp-img /> doen't init when it roll into viewport. #25789

meistudioli opened this issue Nov 27, 2019 · 5 comments

Comments

@meistudioli
Copy link
Contributor

meistudioli commented Nov 27, 2019

To whom it may concern:

I used a CSS carousel to display some cards but looks like amp-img can't init when it has already in viewport.

<style>
:root {
  --spl: .75em;
}
.carousel-shell{width:100%;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-x:scroll;}
.carousel-shell__queue{display:flex;justify-content:flex-start;}
.carousel-shell__queue>*{flex-grow:0;flex-shrink:0;}
.carousel-shell__queue::before{flex:0 0 var(--spl);width:var(--spl);content:'';display:block;}
.carousel-shell__queue::after{flex:0 0 var(--spl);width:var(--spl);content:'';display:block;}

.view-also-view{background:#fff;margin-top:.75em;padding:1em var(--spl);border-top:1px solid #e0e4e9;border-bottom:1px solid #e0e4e9;}
.view-also-view__wrap{position:relative;;width:calc(100% + var(--spl) * 2);height:130px;margin-top:1em;margin-left:calc(var(--spl) * -1);}
.view-also-view__unit{position:relative;width:130px;border-radius:8px;overflow:hidden;display:block;}
.view-also-view__div{position:absolute;display:flex;bottom:0;width:100%;padding-top:.75em;min-height:3.125em;background-image:linear-gradient(0deg,rgba(0,0,0,.7),transparent);align-content:center;}
.view-also-view__p{width:100%;font-size:.9375em;/*15px*/color:#fff;line-height:1.33;max-height:2.66em;box-sizing:border-box;border-left:.667em solid transparent;border-right:.667em solid transparent;align-self:center;white-space:normal;overflow:hidden;}
.view-also-view__unit+.view-also-view__unit{margin-left:.625em;}
</style>


<div class="view-also-view custom-loader">
    <h3 class="view-also-view__h3">最新上架</h3>
    <div class="view-also-view__wrap">
      <div class="carousel-shell">
        <div class="carousel-shell__queue">
             <a href="https://tw.mall.yahoo.com/item/p0246199433663" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199433663">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/lJ_gtWKxeBSo303bWVQaKQ--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/7271/item/p0246199433663-item-79d2xf4x1000x1000-m.jpg" title="東京著衣-夢展望-小高領側排釦麻花針織洋裝-M.L(4190072)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-小高領側排釦麻花針織洋裝-M.L(4190072)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383906" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383906">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/Q6BkR5W4IiSVjNwvsM5kXw--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/eed1/item/p0246199383906-item-f441xf4x1000x1000-m.jpg" title="東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383903" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383903">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/DGEQwzUy88WM80Eg38rbxg--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/687c/item/p0246199383903-item-d69cxf4x1000x1000-m.jpg" title="東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383900" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383900">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/_Y3Lyjwx_RZv0QzOvPktxQ--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/df5e/item/p0246199383900-item-e36cxf4x1000x1000-m.jpg" title="東京著衣-夢展望-花瓣一字領羅紋長袖上衣-M.L(4190009)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-花瓣一字領羅紋長袖上衣-M.L(4190009)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383896" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383896">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/dmqOnO1zuu6i9oYlXI4FSQ--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/66db/item/p0246199383896-item-a50dxf4x1000x1000-m.jpg" title="東京著衣-SILKY-華夫格針織V型針織開襟外套(7190005)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-SILKY-華夫格針織V型針織開襟外套(7190005)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383897" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383897">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/YqHAt662vsiRm1ZxKLxE.g--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/a0fc/item/p0246199383897-item-c2b2xf4x1000x1000-m.jpg" title="東京著衣-夢展望-雙排釦修身毛呢大衣-M.L(4190073)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-雙排釦修身毛呢大衣-M.L(4190073)</p>
                  </div>
                </div>
            </a>

        </div>
      </div>
    </div>
</div>

AMP Version: 1911121900560

@meistudioli meistudioli changed the title <amp-img /> doen't init when it into viewport. <amp-img /> doen't init when it roll into viewport. Nov 27, 2019
@c0b41
Copy link

c0b41 commented Nov 29, 2019

follow up this issue #24929

@dreamofabear
Copy link

Hi Paul, can you try your example against AMP dev channel? It contains a fix that might address your use case.

@meistudioli
Copy link
Contributor Author

meistudioli commented Dec 3, 2019

Hi, @choumx:

I've already opt-in dev channel and looks like fine for me. Will it release with this issue #25680 ?

image

Looks like the above release issue is correct.

@dreamofabear
Copy link

Not the next release but we're planning to roll this feature out over time (#25785).

@jridgewell can give details on the roll out plan.

@jridgewell
Copy link
Contributor

It's live in production now. #26430

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants