Question

我的第一个问题： 我目前正在使用$(window).load来延迟页面呈现，以便加载所有图像，然后显示它。

它适用于所有<img>代码，但无效 具有背景图片的div标签。假设我的网站模板上有30张图片，其中10张来自CSS中指定的background。

使用$(window).load函数，在函数触发之前加载了20个<img>图像。但是当页面开始显示时，将加载剩余的10个。因此，网页在完成之前看起来非常难看。

如何在windows.load函数中包含这些内容？

第二个问题： 因为我是第一次开始制作从头开始的网页页面存在缓存问题。我将解释我的意思。

问题在于我在HTML中更改了某些内容（添加或删除图片等等）当我尝试重新加载我的浏览器上的页面< strong>看到更改，网页进入疯狂模式，它搞砸了。 除非我进行全面刷新（CTRL + F5）。使用哪个浏览器并不重要。在对HTML代码进行小的或大的更改后，页面看起来很乱。

在我的情况下，这不正常。 www上的所有网站都在每天/每周更改他们的模板或页面的一部分，并且看起来很好。我还没有发布我的网站，如果我每次用户看到奇怪的页面时都会对代码进行更改。

发生了什么？

Answer 1

对于缓存问题，您可以添加一个meta元素，告诉浏览器不要缓存页面：

<meta http-equiv="PRAGMA" content="NO-CACHE">

对于您的图像，您可以预加载它们，并且只有在将图像加载到内存中后才允许浏览器执行某些脚本。一种方法看起来像这样：

$(window).load(function(){
    var elementsWithBg = $('*').filter(function(){
        return (bg = $(this).css('background-image')) != '' && bg != 'none'; 
    });
    var n = elementsWithBg.length;
    function callback(){
        if(n > 0)
            return;
        ready();
    }
    elementsWithBg.each(function(i,el){
        var img = new Image();
        img.onload = function(){
           n--; 
           callback();
        };
        img.src = $(this).css('background-image').replace(/url\(['"]?(.*?)['"]?\)/g,'$1');
    });
});
function ready(){
    // your code goes here
}

Answer 2

您可能在本地查看文件。缓存控制比HTTP更好。

一个肯定会有所帮助的建议：使用CSS sprites来大大减少图像和HTTP调用的数量。使用此技术尽可能使用CSS背景。

jQuery - 尝试加载所有内容/缓存问题

2 个答案: