1

我正在尝试使用 jquery创建一个简单的网站http://cone.hostei.com/index3.html 。我只想使用.load()函数将 html 页面加载到 div 中。问题是函数 -$('.preloader').hide()和 ( { opacity : 1 }) 在页面及其图像完全加载到 div 之前触发！我该如何解决？

$(window).load(function () {
 $('li a').click(function () { //event on click
    var toLoad = $(this).attr('href'); //get href of a li element
    $('.load-in').fadeOut('fast', loadContent);
    $('.loader').show(); //show the loader


    function loadContent() {
        $('.load-in').css({ //set opacity 0.3
            opacity: 0.3
        }).load(toLoad, hideLoad); //load html page, then callback
    };


    function hideLoad() {
        $('.load-in').fadeIn('fast',

        function () { //hide preloader and set opacity 1
            $('.loader').fadeOut('fast');
            $('.load-in').animate({
                opacity: 1
            });
        });
    };
    return false;
 });
});
4

2 回答 2

1

您需要确保将 jQuery 代码放在 $(document).ready() 处理程序中。这将确保您的代码在页面中的所有元素都已加载后运行。

请参阅 jQuery API 页面： jQuery - .ready()

于 2013-04-10T02:46:36.020 回答
0

如果要检测图像何时完全加载，以便在显示内容后看不到它们，则必须load在元素中包含的所有图像上附加一个事件处理程序，.load-in并在所有图像加载之前等待淡入元素并淡出加载指示器。

像这样的东西（基于您网站上的代码）：

function loadContent() {
    var $loadIn = $('.load-in');

    $loadIn.css({ opacity : 0.3 }).load(toLoad , function () {
        var $images = $('img', $loadIn),
            imageCount = $images.length,
            loadedCount = 0;

            //wait on images before showing the content
            $images.on('load', function () {
                if (++loadedCount === imageCount) {
                    $images.off('load');
                    hideLoad();
                }
            });

           //make sure the content is still shown if images fails to load
           //or are very slow to load
           setTimeout(function () {
               if (loadedCount !== imageCount) {
                   $images.off('load');
                   hideLoad();
               }
           }, 5000);
    });   
};

但是，这里有一些你应该知道的事情（取自http://api.jquery.com/load-event/）：

与图像一起使用时加载事件的注意事项 开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行一个函数。应该注意几个已知的警告。这些是：

  • 它不能始终如一地工作，也不能可靠地跨浏览器

  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发

  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发
于 2013-04-10T02:55:31.153 回答