<p dir="auto"><strong>Glide Version</strong>:<br>
Xamarin.Gilde 3.7.0</p>

<p dir="auto"><strong>Issue details / Repro steps / Use case background</strong>:<br>
I've opened an issue here <a href="#1664">https://github.com/bumptech/glide/issues/1664</a> about loading images with <code class="notranslate">match_parent</code> width and <code class="notranslate">wrap_content</code> height. As per Robert suggestion, I have refactored my code to use margin instead of padding. Since then, the height of a image is not set to padding size anymore but now it is constrained to image holder's height. Another bug I encountered is inconsistent image's size on subsequent load. Please see some screenshots down this post for illustration.</p>

<p dir="auto"><strong>Glide load line / <code class="notranslate">GlideModule</code> (if any) / list Adapter code (if any)</strong>:</p>
<div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Glide.With(context)
   .Load(currentPost.Embedded.WpFeaturedMedia.FirstOrDefault().SourceUrl)
   .DiskCacheStrategy(DiskCacheStrategy.All)
   .Placeholder(Resource.Drawable.placeholder)
   .Error(Resource.Drawable.placeholder_error)
   .Into(currentViewHolder.ThumbnailImage);"><pre class="notranslate"><span class="pl-smi">Glide</span>.<span class="pl-en">With</span>(<span class="pl-s1">context</span>)
   .<span class="pl-en">Load</span>(<span class="pl-s1">currentPost</span>.<span class="pl-s1">Embedded</span>.<span class="pl-s1">WpFeaturedMedia</span>.<span class="pl-en">FirstOrDefault</span>().<span class="pl-s1">SourceUrl</span>)
   .<span class="pl-en">DiskCacheStrategy</span>(<span class="pl-smi">DiskCacheStrategy</span>.<span class="pl-s1">All</span>)
   .<span class="pl-en">Placeholder</span>(<span class="pl-smi">Resource</span>.<span class="pl-s1">Drawable</span>.<span class="pl-s1">placeholder</span>)
   .<span class="pl-en">Error</span>(<span class="pl-smi">Resource</span>.<span class="pl-s1">Drawable</span>.<span class="pl-s1">placeholder_error</span>)
   .<span class="pl-en">Into</span>(<span class="pl-s1">currentViewHolder</span>.<span class="pl-s1">ThumbnailImage</span>);</pre></div>

<p dir="auto"><strong>Layout XML</strong>:</p>
<div class="highlight highlight-text-xml notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;android.support.v7.widget.CardView xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:auto=&quot;http://schemas.android.com/apk/res-auto&quot;
    xmlns:tools=&quot;http://schemas.android.com/tools&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:layout_gravity=&quot;center&quot;
    android:layout_margin=&quot;5dp&quot;
    android:elevation=&quot;3dp&quot;
    auto:cardCornerRadius=&quot;3dp&quot;
    android:id=&quot;@+id/postcardviewitem_cardview_root&quot;
    auto:cardBackgroundColor=&quot;@color/cardview_post_background&quot;&gt;
    &lt;RelativeLayout
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;&gt;
        &lt;ImageView
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:id=&quot;@+id/postcardviewitem_imageview_thumbnailimage&quot;
            tools:src=&quot;@android:drawable/ic_menu_gallery&quot;
            android:adjustViewBounds=&quot;true&quot;
            android:layout_alignParentTop=&quot;true&quot;
            android:layout_marginTop=&quot;5dp&quot;
            android:layout_marginBottom=&quot;5dp&quot;
            android:layout_marginLeft=&quot;20dp&quot;
            android:layout_marginRight=&quot;20dp&quot; /&gt;
        &lt;TextView
            android:text=&quot;Title&quot;
            android:textAppearance=&quot;?android:attr/textAppearanceMedium&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_below=&quot;@id/postcardviewitem_imageview_thumbnailimage&quot;
            android:id=&quot;@+id/postcardviewitem_text_title&quot;
            android:textColor=&quot;@color/cardview_post_title&quot;
            android:paddingLeft=&quot;20dp&quot;
            android:paddingRight=&quot;20dp&quot;
            android:paddingTop=&quot;10dp&quot;
            android:paddingBottom=&quot;5dp&quot; /&gt;
        &lt;TextView
            android:text=&quot;Author&quot;
            android:textAppearance=&quot;?android:attr/textAppearanceSmall&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_below=&quot;@id/postcardviewitem_text_title&quot;
            android:id=&quot;@+id/postcardviewitem_text_author&quot;
            android:textColor=&quot;@color/cardview_post_author&quot;
            android:paddingLeft=&quot;20dp&quot;
            android:paddingRight=&quot;20dp&quot;
            android:paddingBottom=&quot;5dp&quot; /&gt;
    &lt;/RelativeLayout&gt;
&lt;/android.support.v7.widget.CardView&gt;"><pre class="notranslate">&lt;<span class="pl-ent">android</span>.support.v7.widget.CardView <span class="pl-e">xmlns</span><span class="pl-e">:</span><span class="pl-e">android</span>=<span class="pl-s"><span class="pl-pds">"</span>http://schemas.android.com/apk/res/android<span class="pl-pds">"</span></span>
    <span class="pl-e">xmlns</span><span class="pl-e">:</span><span class="pl-e">auto</span>=<span class="pl-s"><span class="pl-pds">"</span>http://schemas.android.com/apk/res-auto<span class="pl-pds">"</span></span>
    <span class="pl-e">xmlns</span><span class="pl-e">:</span><span class="pl-e">tools</span>=<span class="pl-s"><span class="pl-pds">"</span>http://schemas.android.com/tools<span class="pl-pds">"</span></span>
    <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_width</span>=<span class="pl-s"><span class="pl-pds">"</span>match_parent<span class="pl-pds">"</span></span>
    <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_height</span>=<span class="pl-s"><span class="pl-pds">"</span>wrap_content<span class="pl-pds">"</span></span>
    <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_gravity</span>=<span class="pl-s"><span class="pl-pds">"</span>center<span class="pl-pds">"</span></span>
    <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_margin</span>=<span class="pl-s"><span class="pl-pds">"</span>5dp<span class="pl-pds">"</span></span>
    <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">elevation</span>=<span class="pl-s"><span class="pl-pds">"</span>3dp<span class="pl-pds">"</span></span>
    <span class="pl-e">auto</span><span class="pl-e">:</span><span class="pl-e">cardCornerRadius</span>=<span class="pl-s"><span class="pl-pds">"</span>3dp<span class="pl-pds">"</span></span>
    <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>@+id/postcardviewitem_cardview_root<span class="pl-pds">"</span></span>
    <span class="pl-e">auto</span><span class="pl-e">:</span><span class="pl-e">cardBackgroundColor</span>=<span class="pl-s"><span class="pl-pds">"</span>@color/cardview_post_background<span class="pl-pds">"</span></span>&gt;
    &lt;<span class="pl-ent">RelativeLayout</span>
        <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_width</span>=<span class="pl-s"><span class="pl-pds">"</span>match_parent<span class="pl-pds">"</span></span>
        <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_height</span>=<span class="pl-s"><span class="pl-pds">"</span>match_parent<span class="pl-pds">"</span></span>&gt;
        &lt;<span class="pl-ent">ImageView</span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_width</span>=<span class="pl-s"><span class="pl-pds">"</span>match_parent<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_height</span>=<span class="pl-s"><span class="pl-pds">"</span>wrap_content<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>@+id/postcardviewitem_imageview_thumbnailimage<span class="pl-pds">"</span></span>
            <span class="pl-e">tools</span><span class="pl-e">:</span><span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>@android:drawable/ic_menu_gallery<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">adjustViewBounds</span>=<span class="pl-s"><span class="pl-pds">"</span>true<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_alignParentTop</span>=<span class="pl-s"><span class="pl-pds">"</span>true<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_marginTop</span>=<span class="pl-s"><span class="pl-pds">"</span>5dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_marginBottom</span>=<span class="pl-s"><span class="pl-pds">"</span>5dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_marginLeft</span>=<span class="pl-s"><span class="pl-pds">"</span>20dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_marginRight</span>=<span class="pl-s"><span class="pl-pds">"</span>20dp<span class="pl-pds">"</span></span> /&gt;
        &lt;<span class="pl-ent">TextView</span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">text</span>=<span class="pl-s"><span class="pl-pds">"</span>Title<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">textAppearance</span>=<span class="pl-s"><span class="pl-pds">"</span>?android:attr/textAppearanceMedium<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_width</span>=<span class="pl-s"><span class="pl-pds">"</span>match_parent<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_height</span>=<span class="pl-s"><span class="pl-pds">"</span>wrap_content<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_below</span>=<span class="pl-s"><span class="pl-pds">"</span>@id/postcardviewitem_imageview_thumbnailimage<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>@+id/postcardviewitem_text_title<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">textColor</span>=<span class="pl-s"><span class="pl-pds">"</span>@color/cardview_post_title<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">paddingLeft</span>=<span class="pl-s"><span class="pl-pds">"</span>20dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">paddingRight</span>=<span class="pl-s"><span class="pl-pds">"</span>20dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">paddingTop</span>=<span class="pl-s"><span class="pl-pds">"</span>10dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">paddingBottom</span>=<span class="pl-s"><span class="pl-pds">"</span>5dp<span class="pl-pds">"</span></span> /&gt;
        &lt;<span class="pl-ent">TextView</span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">text</span>=<span class="pl-s"><span class="pl-pds">"</span>Author<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">textAppearance</span>=<span class="pl-s"><span class="pl-pds">"</span>?android:attr/textAppearanceSmall<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_width</span>=<span class="pl-s"><span class="pl-pds">"</span>match_parent<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_height</span>=<span class="pl-s"><span class="pl-pds">"</span>wrap_content<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">layout_below</span>=<span class="pl-s"><span class="pl-pds">"</span>@id/postcardviewitem_text_title<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>@+id/postcardviewitem_text_author<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">textColor</span>=<span class="pl-s"><span class="pl-pds">"</span>@color/cardview_post_author<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">paddingLeft</span>=<span class="pl-s"><span class="pl-pds">"</span>20dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">paddingRight</span>=<span class="pl-s"><span class="pl-pds">"</span>20dp<span class="pl-pds">"</span></span>
            <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">paddingBottom</span>=<span class="pl-s"><span class="pl-pds">"</span>5dp<span class="pl-pds">"</span></span> /&gt;
    &lt;/<span class="pl-ent">RelativeLayout</span>&gt;
&lt;/<span class="pl-ent">android</span>.support.v7.widget.CardView&gt;</pre></div>
<p dir="auto"><strong>Example</strong>:</p>

<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/24774495/22066926/ae842142-ddc1-11e6-813b-caee856360ff.png"><img src="https://cloud.githubusercontent.com/assets/24774495/22066926/ae842142-ddc1-11e6-813b-caee856360ff.png" alt="figure1" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Glide Version/Integration library (if any)</strong>: 3.5.2<br>
<strong>Device/Android Version</strong>: S4/4.4<br>
<strong>Issue details/Repro steps</strong>: Load a different sized thumbnail and image, or placeholder and image and note the result:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2906988/6538023/e027582a-c45c-11e4-8758-abb9d7a67c69.gif"><img src="https://cloud.githubusercontent.com/assets/2906988/6538023/e027582a-c45c-11e4-8758-abb9d7a67c69.gif" alt="demo" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Glide load line</strong>:</p>
<div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Delay extends UnitTransformation {
    private final int sleepTime;
    public Delay(int sleepTime) { this.sleepTime = sleepTime; }
    @Override public Resource transform(Resource resource, int outWidth, int outHeight) {
        try { Thread.sleep(sleepTime); } catch (InterruptedException ex) {}
        return super.transform(resource, outWidth, outHeight);
    }
}

@Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    final ImageView image = new ImageView(this);
    setContentView(image);

    // Saved as R.drawable.placeholder
    String placeholder = &quot;http://placehold.it/300x500/eedddd.png&amp;text=PLACEHOLDER&quot;;
    // Square image
    String thumb = &quot;http://placehold.it/300x300/eeeedd.png&amp;text=THUMB&quot;;
    // Wide image
    final String full = &quot;http://placehold.it/300x100/eedddd.png&amp;text=FULL&quot;;
    // Prepared request with unimportant clutter
    final DrawableRequestBuilder&lt;String&gt; req = Glide
            .with(this)
            .fromString()
            .diskCacheStrategy(DiskCacheStrategy.SOURCE) // disable network delay for demo
            .skipMemoryCache(true) // make sure transform runs for demo
            .crossFade(2000) // default, just stretch time for noticability
    ;

    req.clone()
        .thumbnail(req.clone()
                    .transform(new Delay(500)) // wait a little
                    .load(thumb)
        )
        .transform(new Delay(1000)) // wait before going from thumbnail to image
        //.dontAnimate() // solves the problem
        .load(full)
        .into(image);

    image.setOnClickListener(new OnClickListener() {
        @Override public void onClick(View v) {
            req.clone()
                .load(full)
                .placeholder(R.drawable.placeholder)
                .transform(new Delay(1000))
                //.animate(R.anim.abc_fade_in) // also solves the problem
                .into(image);
        }
    });"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Delay</span> <span class="pl-k">extends</span> <span class="pl-smi">UnitTransformation</span> {
    <span class="pl-k">private</span> <span class="pl-k">final</span> <span class="pl-smi">int</span> <span class="pl-s1">sleepTime</span>;
    <span class="pl-k">public</span> <span class="pl-smi">Delay</span>(<span class="pl-smi">int</span> <span class="pl-s1">sleepTime</span>) { <span class="pl-smi">this</span>.<span class="pl-s1">sleepTime</span> = <span class="pl-s1">sleepTime</span>; }
    <span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">public</span> <span class="pl-smi">Resource</span> <span class="pl-en">transform</span>(<span class="pl-smi">Resource</span> <span class="pl-s1">resource</span>, <span class="pl-smi">int</span> <span class="pl-s1">outWidth</span>, <span class="pl-smi">int</span> <span class="pl-s1">outHeight</span>) {
        <span class="pl-k">try</span> { <span class="pl-smi">Thread</span>.<span class="pl-en">sleep</span>(<span class="pl-s1">sleepTime</span>); } <span class="pl-k">catch</span> (<span class="pl-smi">InterruptedException</span> <span class="pl-s1">ex</span>) {}
        <span class="pl-k">return</span> <span class="pl-en">super</span>.<span class="pl-en">transform</span>(<span class="pl-s1">resource</span>, <span class="pl-s1">outWidth</span>, <span class="pl-s1">outHeight</span>);
    }
}

<span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">protected</span> <span class="pl-smi">void</span> <span class="pl-s1">onCreate</span>(<span class="pl-smi">Bundle</span> <span class="pl-s1">savedInstanceState</span>) {
    <span class="pl-en">super</span>.<span class="pl-en">onCreate</span>(<span class="pl-s1">savedInstanceState</span>);
    <span class="pl-k">final</span> <span class="pl-smi">ImageView</span> <span class="pl-s1">image</span> = <span class="pl-k">new</span> <span class="pl-smi">ImageView</span>(<span class="pl-smi">this</span>);
    <span class="pl-en">setContentView</span>(<span class="pl-s1">image</span>);

    <span class="pl-c">// Saved as R.drawable.placeholder</span>
    <span class="pl-smi">String</span> <span class="pl-s1">placeholder</span> = <span class="pl-s">"http://placehold.it/300x500/eedddd.png&amp;text=PLACEHOLDER"</span>;
    <span class="pl-c">// Square image</span>
    <span class="pl-smi">String</span> <span class="pl-s1">thumb</span> = <span class="pl-s">"http://placehold.it/300x300/eeeedd.png&amp;text=THUMB"</span>;
    <span class="pl-c">// Wide image</span>
    <span class="pl-k">final</span> <span class="pl-smi">String</span> <span class="pl-s1">full</span> = <span class="pl-s">"http://placehold.it/300x100/eedddd.png&amp;text=FULL"</span>;
    <span class="pl-c">// Prepared request with unimportant clutter</span>
    <span class="pl-k">final</span> <span class="pl-smi">DrawableRequestBuilder</span>&lt;<span class="pl-smi">String</span>&gt; <span class="pl-s1">req</span> = <span class="pl-smi">Glide</span>
            .<span class="pl-en">with</span>(<span class="pl-smi">this</span>)
            .<span class="pl-en">fromString</span>()
            .<span class="pl-en">diskCacheStrategy</span>(<span class="pl-smi">DiskCacheStrategy</span>.<span class="pl-c1">SOURCE</span>) <span class="pl-c">// disable network delay for demo</span>
            .<span class="pl-en">skipMemoryCache</span>(<span class="pl-c1">true</span>) <span class="pl-c">// make sure transform runs for demo</span>
            .<span class="pl-en">crossFade</span>(<span class="pl-c1">2000</span>) <span class="pl-c">// default, just stretch time for noticability</span>
    ;

    <span class="pl-s1">req</span>.<span class="pl-en">clone</span>()
        .<span class="pl-en">thumbnail</span>(<span class="pl-s1">req</span>.<span class="pl-en">clone</span>()
                    .<span class="pl-en">transform</span>(<span class="pl-k">new</span> <span class="pl-smi">Delay</span>(<span class="pl-c1">500</span>)) <span class="pl-c">// wait a little</span>
                    .<span class="pl-en">load</span>(<span class="pl-s1">thumb</span>)
        )
        .<span class="pl-en">transform</span>(<span class="pl-k">new</span> <span class="pl-smi">Delay</span>(<span class="pl-c1">1000</span>)) <span class="pl-c">// wait before going from thumbnail to image</span>
        <span class="pl-c">//.dontAnimate() // solves the problem</span>
        .<span class="pl-en">load</span>(<span class="pl-s1">full</span>)
        .<span class="pl-en">into</span>(<span class="pl-s1">image</span>);

    <span class="pl-s1">image</span>.<span class="pl-en">setOnClickListener</span>(<span class="pl-k">new</span> <span class="pl-smi">OnClickListener</span>() {
        <span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">public</span> <span class="pl-smi">void</span> <span class="pl-en">onClick</span>(<span class="pl-smi">View</span> <span class="pl-s1">v</span>) {
            <span class="pl-s1">req</span>.<span class="pl-en">clone</span>()
                .<span class="pl-en">load</span>(<span class="pl-s1">full</span>)
                .<span class="pl-en">placeholder</span>(<span class="pl-smi">R</span>.<span class="pl-s1">drawable</span>.<span class="pl-s1">placeholder</span>)
                .<span class="pl-en">transform</span>(<span class="pl-k">new</span> <span class="pl-smi">Delay</span>(<span class="pl-c1">1000</span>))
                <span class="pl-c">//.animate(R.anim.abc_fade_in) // also solves the problem</span>
                .<span class="pl-en">into</span>(<span class="pl-s1">image</span>);
        }
    });</pre></div>
<p dir="auto">By removing all the delaying parts, the end result is better, but the now the thumbnail is messed up:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2906988/6538022/e0252d02-c45c-11e4-82a6-6f13f3a215af.gif"><img src="https://cloud.githubusercontent.com/assets/2906988/6538022/e0252d02-c45c-11e4-82a6-6f13f3a215af.gif" alt="demo3" data-animated-image="" style="max-width: 100%;"></a></p>