0

im kinda new to js , when i want to load an image as a background picture , there is a white background bcz of loading image file , what should i do for it ? here is my code :

const all_pages = ['visual', 'idea', 'decoration', 'digital-marketing', 'print']

function onCircleClick(page_id) {
    for (const page of all_pages) {
        document.getElementById(page).style.display = 'none'
    }
    document.getElementById(page_id).style.display = 'block'
    $(`#${page_id}`).chainFade({ toThe: 'left' })

    switch (page_id) {
        case 'visual':
            document.getElementById("ability").style.backgroundImage = "url('static/img/skill/visual-min.jpg')"
            break;
        case 'idea':
            document.getElementById("ability").style.backgroundImage = "url('static/img/skill/idea-min.jpg')"
            break;
        case 'decoration':
            document.getElementById("ability").style.backgroundImage = "url('static/img/skill/decor-min.jpg')"
            break;
        case 'print':
            document.getElementById("ability").style.backgroundImage = "url('static/img/skill/print-min.jpg')"
            break;
        case 'digital-marketing':
            document.getElementById("ability").style.backgroundImage = "url('static/img/skill/deigital-min.jpg')"
            break;
    }
alireza javanmardi
  • 117
  • 1
  • 2
  • 7
  • 3
    General development tip: If you find yourself writing repeated, almost-identical code, always assume there's a better way. The only bit that changes in those switch cases is the part of the image filename, so it just needs a variable. – Mitya Jul 01 '20 at 10:30
  • 1
    1) make the image file sizes substantially smaller (compressed) so they don't take so long to load. 2) pre-load the images so they don't need to be loaded from the server when changed, here's something similar (if not the same) as what you're doing: https://stackoverflow.com/a/17092083/2181514 – freedomn-m Jul 01 '20 at 10:42

0 Answers0