图片延迟加载的实现

最新推荐文章于 2022-08-04 14:12:26 发布

原创最新推荐文章于 2022-08-04 14:12:26 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #2010 #opera #object #浏览器

本文介绍了一种网页图片延迟加载的方法，通过在页面加载完成后统一设置图片源的方式减少首屏加载时间，提高用户体验。该方法适用于非首屏展示的图片资源。

有时候，我们的一个网页上会包含很多张图片。这些图片有可能都是存在一台服务器上，使用同一个域名，如img.com。虽然现在的浏览器在加载图片时，可以同时打开多个线程去拉取图片，但是如果图片太多的话依然会产生阻塞。

解决办法有以下几种：

1.将这些图片放到不同的域名下；

2.如果这些图片不是处于首屏，那么可以延迟加载。这里面又有两种方式：

a)当滚动条滚动快要滚动到该图片的位置时，加载图片。采用这种技术的如淘宝网；

b)先不加载图片，而当页面load完成时再去加载。如腾讯汽车的车型大全首页（嘿嘿，王婆卖瓜了）

本文主要讲2.b方法。比较简单，直接贴代码了

<html> <body> <img __src="http://mat1.gtimg.com/datalib_img/car_manufacturer/pic/info/2010-10-09/2010100914313077099040512.jpg" /> <img __src="http://mat1.gtimg.com/datalib_img/car_manufacturer/pic/info/2009-06-09/2009060918214869197640512.jpg" /> <img __src="http://mat1.gtimg.com/datalib_img/car_manufacturer/pic/info/2010-09-02/2010090215064444515840512.jpg" /> <mce:script language="Javascript"></mce:script> </body> </html>