Is there a way to delay the rendering of images in my list until all content is ready? I want everything, including text and classes, to finish loading before displaying anything. Even with v-cloak, it's not working!
I'm having difficulty with this particular aspect.
https://i.sstatic.net/fgw5M.png
Even though the entire list is rendered, some images are still pending.
Below is an excerpt of my code:
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<img :src="todo.img" width="100px">
{{todo.name}}
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
todos: []
},
created: function(){
this.requestApi();
},
methods: {
requestApi(){
this.todos = [
{ img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "AAA" },
{ img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "BBB" },
{ img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "CCC" },
{ img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "DDD" }
];
}
}
})
https://jsfiddle.net/vxy4gnj8/3/
The issue may not be clear in the JSFiddle since it doesn't send a real api request and renders too quickly.