刷新页面时出现图像故障

Question

When I refresh my page, I can see the image glitch.

#HTML

<img id="profileIcon" class="img-circle" src="/assets/be/img/norden/6.JPG?q=0.13941100 1614531096" alt="Forest" style="border: 4px solid rgb(0, 255, 92); cursor: url(&quot;https://i.imgur.com/T2QWx7Z.png&quot;), auto;">

How can I avoid that? Should I look into using jQuery animation? What causes it to glitch? and How can I prevent it? I just want to make a smooth transition refresh.. and hoping that my DOMs are rendering nicely.

Please advise.

Live Site (please see in mobile)

https://www.bunlongheng.com/norden?code=rithys4k

Answer 1

Instead of giving border to image directly, wrap img tag with div and assign width , height and border properties to the div . For the img tag, give max-width:100% . Give alt attribute to show placeholder until the image is loaded.