jquery实现图片预加载技术，使得图片加载更为流畅，和谐。资源-CSDN文库

共10个文件

jpg：4个

gif：2个

html：1个

5星 · 超过95%的资源需积分: 9 107 浏览量 2009-10-15 18:28:28 上传评论收藏 983KB RAR 举报

在网页设计中，图片加载速度往往直接影响用户体验。为了提高页面加载效率和用户浏览的流畅性，我们可以采用图片预加载技术。jQuery作为一个强大的JavaScript库，提供了丰富的API和插件，可以帮助我们实现这一目标。本篇文章将深入探讨如何使用jQuery实现图片预加载，并探讨相关的优化策略。图片预加载的基本原理是在页面加载时，提前请求图片资源，将其缓存到浏览器中，以便用户在实际查看图片时可以快速显示出来。这样可以避免用户在滚动页面时看到空白的图片占位符，提升用户体验。在jQuery中，我们可以创建一个函数来处理图片的预加载。我们需要获取到要预加载的图片URL列表。这可以通过遍历DOM元素或读取JSON数据等方式实现。然后，我们可以创建一个新的`<img>`元素，设置其`src`属性为图片URL，从而触发浏览器下载图片。以下是一个简单的预加载函数示例： ```javascript function preloadImages(imagesArray) { for (var i = 0; i < imagesArray.length; i++) { var img = new Image(); img.src = imagesArray[i]; } } ``` 为了适应不同尺寸的屏幕和设备，图片的大小可能需要动态调整。jQuery提供了一些方法来改变图片的尺寸，如`width()`和`height()`用于获取或设置元素的宽度和高度，以及`css()`方法可以设置CSS样式，包括`width`和`height`属性。例如： ```javascript $('img').css({ 'width': 'auto', 'height': 'auto', 'max-width': '100%', 'max-height': '100%', 'display': 'block' }); ``` 上述代码将图片的宽度和高度设置为自动，并限制最大宽度和高度不超过容器的大小，同时让图片居中显示。这样无论图片原始尺寸多大，都能自适应地填充或缩放，保持页面布局的和谐。此外，还可以结合CSS3的`background-size`属性实现背景图片的居中和自适应。例如，使用`cover`值可以让背景图片始终覆盖容器，同时保持纵横比： ```css .container { background-image: url('your-image-url'); background-position: center; background-repeat: no-repeat; background-size: cover; } ``` 为了进一步优化预加载过程，我们可以考虑以下策略： 1. **异步加载**：只预加载当前可视区域内的图片，其他图片在滚动到相应位置时再加载。 2. **使用懒加载插件**：如`jquery.lazyload.js`，它会自动监控图片进入视口的事件，从而延迟加载。 3. **图片格式选择**：根据需要选择适合的图片格式，如WebP、JPEG 2000等，它们通常具有更好的压缩效果，能减小文件大小。 4. **使用CDN服务**：将图片托管在CDN（内容分发网络）上，利用其全球分布式节点，加快图片的加载速度。通过这些技术和策略，我们可以有效地提升图片预加载的效率，使网页的图片展示更加流畅和谐，提升用户在浏览网页时的满意度。在实际项目中，可以根据具体需求灵活选择和组合这些方法，以达到最佳的性能优化效果。

资源推荐

资源详情

资源评论

收起资源包目录

jqueryLoadImg.rar （10个子文件）

jqueryLoadImg

demo.html 2KB

jquery.loadthumb.js 2KB

images

adads.jpg 49KB

mainbgbj.gif 60KB

m_k.jpg 45KB

loading.gif 2KB

Thumbs.db 7KB

DSC05513.JPG 813KB

q4.jpg 21KB

cr.css 341B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="cr.css" /> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="utf-8"></script> <script src="jquery.loadthumb.js" type="text/javascript" language="javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $("button:eq(0)").click(function(){ showImg("images/q4.jpg"); }); $("button:eq(1)").click(function(){ showImg("images/mainbgbj.gif"); }); $("button:eq(2)").click(function(){ showImg("images/adads.jpg"); }); $("button:eq(3)").click(function(){ showImg("images/DSC05513.JPG"); }); $("button:eq(4)").click(function(){ showImg("images/m_k.jpg"); }).click(); }); function showImg(src) { var $img = $("#myImgs"); $img.loadthumb({ "src": src , "imgId":"myImgs", "parentId":"CRviewer" }); } </script> </head> <body> <button>加载第1张(300*80)</button> <button>加载第2张(728*90)</button> <button>加载第3张(548*448)</button> <button>加载第4张(337*186)</button> <button>加载第5张(353*288)</button> <div class="box"> <div class="CRviewer" id="CRviewer"> <img src="images/q4.jpg" id="myImgs"/> </div> </div> <p>程序介绍：</p> <p>通过图片预加载技术，使得图片加载更为流畅，和谐。当图片的大小比较大时，图片也可以自动调整宽度和高度，同时图片也能居中。 </p> <p>Dev By <a href="http://www.cssrain.cn" >CssRain.cn</a></p> <p>相关内容： <a href="http://cssrain.cn/article.asp?id=1020" >http://cssrain.cn/article.asp?id=1020</a></p> </body> </html>

评论收藏

内容反馈