javascript - 使图像加载更快的 HTML

标签 javascript jquery css html

我的网页结构是:

<html>
<body>
    <div id="1">
        <img>.....<img>
    </div>
    <div id="2">
        <img>.....<img>
    </div>
    <div id="3">
        <img>.....<img>
    </div>
    <div id="4">
        <img>.....<img>
    </div>
</body>
</html>

所有这些div都隐藏在开头,根据导航,这些div一一显示。有一个菜单div 将控制其他div 的隐藏和显示。

当我将文件上传到服务器时,我意识到为了加载网站,必须加载所有图像,图像总大小约为 10MB。因此,网站加载需要花费大量时间。是否有其他方法/技巧可以加快网页加载速度?

将这些图像放在不同的页面中并不是替代方法。我打算使用 jQuery 和 CSS 转换使网站正常工作。请建议我可以加快网页加载速度的方法。

我使用什么方法? 一种方法是在网站加载之前显示加载中的 gif。还有哪些其他选择?

最佳答案

由于您使用的是 jQuery,我建议您使用 lazyload .它会导致图像仅在视口(viewport)中加载。

关于javascript - 使图像加载更快的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27213745/

相关文章:

javascript - 多个jQuery事件,获取当前执行事件

JavaScript 未正确排序价格

javascript - 使用弹出编辑器添加时 Kendo 网格数据未显示?

javascript - 如何使用 overflow-y 滚动到 div 中的元素

javascript - 如何将下拉箭头移动到顶部?

javascript - 计算列表中隐藏的下一行元素

css - Firefox 和 Opera/Chrome/IE 中的表单填充差异

javascript - 如何组合拉斐尔动画?

javascript - jquery 有时不调整 div 宽度

javascript - 识别哪个 JS 脚本正在执行该事件