Question

我已经构建了一个带有标题的捐赠页面（当前插入标题中的图片是一个通用的占位符）。当我在iPhone或Android上加载此页面时，它起初看起来很棒。但是当我向下滚动以查看页面的其余部分然后向上滚动时，标题会丢失一秒钟，然后它会再次显示为最初呈现。

我想这样做，以便当我从标题滚动时它停留在那里，当我向后滚动它时不必重新加载。

以下是代码：

.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    }

       #student_dashboard .container_12 .grid_12 {
         width: 100%;
        }
        .container_12 .grid_12 {
          width: 90.5%;
        }
         .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
               display: inline;
               float: left;
               position: relative;
               margin-left: 15.0px;
               margin-right: 15.0px;
         }
         header #logo {
          display: inline-block;
          float: left;
         }
         img {
           vertical-align: middle;
           display: block;
           float: none;
           margin: 0 auto;
          }
          img {
            border: 0;
          }

<body id="student_dashboard">
            <form id="form1" runat="server">
              <div id="custom_bg"><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idBGImage) %>'></div>
        <header>
    		<div class="container_12">
    			<div class="grid_12">
                    <div id="logo"><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idLogo)%>' width="100" height="100"></div>
                    <h1 id="welcome">Welcome to <span id="spanName" runat="server"></span> Fundraising page</h1>
                </div>
    		</div>
        </header>
        <div class="clearfix"></div>
        <div id="content">  
            <div class="container_12">
                <div class="wrapper">

                    <div class="grid_4">
                        <div><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idImage)%>' class="rounded-image-corners" /></div>
                        <div class="name"><span id="spanNameMain" runat="server"></span></div>
                        <blockquote >Please help me reach my fundraising goal! Thank you so much!
                        </blockquote>
                    </div>
                    <div class="grid_8">
                      <div class="grid_8">
                        <div class="padding">
                          <p>Welcome to my fundraiser! Thank you for being willing to participate and help me and my team! You can see how my team is doing with our fundraising goal by checking the gauge at the bottom of this page. Remember, each dollar counts!</p>
                        </div>
                    </div>
                    <div class="grid_8">
                      <div class="padding">
                            <h3>Donate</h3>
                            <p>Make a direct donation to my fundraising account by clicking the "Donate" button below.</p>
                            <br><br>
                       </div>
                      
                            <div id="thermo2" class="thermometer horizontal">
                                <div class="track">
                                    <div class="goal">
                                        <div class="amount"> 1000000 </div>
                                    </div>
                                    <div class="progressbar">
                                        <div class="amount">354680 </div>
                                    </div>
                                </div>
                            </div>  

                       <div class="padding" id="paddingbtn">              
                          <asp:ImageButton ID="btnImageDonate" runat="server"  ImageURL="~/Images/btndonate.png"  />
                       </div>  
                    </div>  
                    </div>
                    </div>
                            
                    </div> 
            </div>    
        </div>
        <div class="clearfix"></div>

        </form>
    </body>

Answer 1

这是一个优化问题。使用html中的图片标签来解决它。图片根据屏幕尺寸加载不同尺寸的图像。

<picture>
  <source srcset="img/hero_landscape.png" media="(max-width: 480px)" />
  <img src="img/hero_pc.png" alt="Default Image" width="710" height="200"> 
</picture>

Info and examples on picture

我在移动设备上滚动时需要重新加载元素

1 个答案: