代码之家  ›  专栏  ›  技术社区  ›  jeroen

在继续之前,请确认所有图像都已加载到`$(window).load()`函数中

  •  3
  • jeroen  · 技术社区  · 14 年前

    我正在为幻灯片放映向页面添加许多大图像,但我只想在页面的正常部分(包括图像)完全加载时才开始加载这些图像。

    为此,我将图像添加到 $(window).load()

    var slide_total = 20;
    
    $(window).load(function() {
    
        for (i = 2; i <= slide_total; i++)
        {
            content = '<li><img src="/images/header' + ((i < 10) ? '0' : '') + i + '.jpg" width="960" height="314"></li>';
            $("#slideshow li:last-child").after(content);
        }
    
        slide_interval = setInterval( "slideSwitch()", slide_duration );
    
    });
    

    幻灯片放映 slideSwitch() 应该在所有图像完全加载时开始,但现在是从元素添加到DOM时开始。

    document.ready 因为我不希望幻灯片放映干扰正常图像的加载。

    如何在设置间隔之前检查是否加载了所有图像?

    1 回复  |  直到 14 年前
        1
  •  4
  •   karim79    14 年前

    试试这个:

    // get the total number of images inserted in the DOM
    var imgCount = $('#slideshow img').length;
    
    // initialize a counter which increments whenever an image finishes loading
    var loadCounter = 0;
    
    // bind to the images' load event
    $("#slideshow li img").load(function() {
    
        // increment the load counter
        loadCounter++;
    
        // once the load counter equals the total number of images
        // set off the fancy stuff
        if(loadCounter == imgCount) {
            slide_interval = setInterval( "slideSwitch()", slide_duration );
        }
    }).each(function() {
    
        // trigger the load event in case the image has been cached by the browser
        if(this.complete) $(this).trigger('load');
    });