HTML – Hide the broken icon when the is not yet loaded

Updated @ 2015-10-12: The following snippet could get rid of the broken icon without using CSS and JS.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="" ng-href="{{ image.href }}"></image>
</svg>

 

Thanks Wouter De Loose.

 

i have the following <svg> in an AngularJS template and the image source would be assigned by the controller which loaded the image info from a .json file.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="{{ image.href }}"></image>
</svg>

 

It works fine on my local machine but when i put it on a webserver. There would be a flash of the broken image before the image is loaded.
svg-image-broken
 

I tried many methods but still no luck. Finally, i have to set the image to hidden in CSS and listen to the image onload event to make it visible.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="{{ image.href }}" onload="jQuery(this).css('visibility', 'visible');"></image>
</svg>

 

Done =)

Reference: StackOverflow – Is it possible to listen image load event in SVG?

Advertisements

One thought on “HTML – Hide the broken icon when the is not yet loaded”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s