All geek questions in one place

How to preload a large image?

I have certain links, on the mouse above these links I change the <div>background image

jQuery I used is-

function imgchange()
    {
        $('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        $(this).find('hbg').attr('title', 'my tootip info');
        });     
    }

It works fine, but the problem is that when I run it on server images, it takes 3-4 seconds to change when changing, but the second time, when I make a mouse over the images, they change instantly, I think it’s per browser stored images in cache. So I added one javascript to preload the images on the onLoad () ivent page -

<script language = "JavaScript">
function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "images/soluinfo1.jpg";
heavyImage.src = "images/soluinfo2.jpg";
heavyImage.src = "images/soluinfo3.jpg";
heavyImage.src = "images/soluinfo4.jpg";
heavyImage.src = "images/soluinfo5.jpg";
heavyImage.src = "images/soluinfo6.jpg";
heavyImage.src = "images/soluinfo7.jpg";
}
</script>

<body onLoad="javascript:preloader()">

but this script did not solve my problem. What should I do?

+3
source share
2 answers

@ Richard (), , , , , , heavyImage.src="" . Image .src , ( , JavaScript .src - ),

. Image, . - :

<script type="text/javascript">
function preloader() 
{
    function doPreload(strImagePath) 
    {
        var heavyImage = new Image();
        heavyImage.src = strImagePath;
    }

    var arrImages = ["images/soluinfo1.jpg","images/soluinfo2.jpg","images/soluinfo3.jpg","images/soluinfo4.jpg","images/soluinfo5.jpg","images/soluinfo6.jpg","images/soluinfo7.jpg"];
    for (var i = 0; i < arrImages.length; i++) {
        doPreload(arrImages[i]);
    }
}
</script>

heavyImage ( var), , Image .

- "load" heavyImage. , , . , ( , , , ), ( ),

+3

CSS ( ). , , CSS, , .

, , , .

+3

Source: https://habr.com/ru/post/1755704/

More articles:


All Articles