Bug 175138 – Replacing the src attribute of an image via JavaScript results in flickering

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Images

[Frank Rausch]

Created attachment 317127 [details]
A screencast that shows image flickering in Safari on iOS 11 b4.

Replacing the `src` attribute of an `<img>` via JavaScript results in flickering.

HTML/JS demo here: 
http://temp.frankrausch.com/webkit-image-flicker/


# Steps to Reproduce:

1) Replace an image with another image by changing the `src` attribute of an `<img>` via JavaScript.

    For example: 
    image.setAttribute("src", "bastille-large.jpg");


# Actual Results:

The old image is visually removed for a split second, resulting in flickering.
This only seems to happen when loading an image that has not been displayed before.


# Expected Results:

The new image should appear instantly as soon as it’s been downloaded, without the old image disappearing. This was the case in iOS <=10.


# Software Version:

This occurs on iOS 11 beta 4; in Safari and also in my app’s WKWebView.


# Additional Information:

I use this library to lazy-load high-resolution versions of images in my app. 
https://github.com/verlok/lazyload
It shows the low-resolution images in `src` by default and lazy-loads the high-resolution versions from a `data-src` attribute.

[Brent Fulgham]

<rdar://problem/33727068>

[Brent Fulgham]

*** This bug has been marked as a duplicate of bug 174451 ***