`

javascript实现图片预加载

JavaScriptjQuery浏览器HTML 
阅读更多

实例代码，仅供方便以后查看。

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图片的预下载
    img.src = url;
   
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
        callback.call(img);
        return; // 直接返回，不用再处理onload事件
    }

    img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};
</script>
</head>
<body onload="loadImage('http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg',function(){$('#imgdiv').append(this);})">
<div id="imgdiv"></div>
</body>
</html>
 
分享到：
| 理解ThreadLocal
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【JavaScript源代码】javascript实现图片预加载和懒加载.docx

    ### JavaScript 实现图片预加载与懒加载技术解析 #### 一、引言 在现代Web开发中，优化页面加载速度及提升用户体验是非常重要的环节。图片作为网页内容的重要组成部分，其加载方式直接影响着整个页面的性能表现。...

    js实现图片预加载.tx

    本文将详细探讨如何使用JavaScript实现图片预加载，并通过一个具体的示例代码来解析其实现过程。 #### 一、图片预加载的基本概念 图片预加载是指在用户请求页面时，预先加载页面中即将显示或可能需要的图片资源。...

    图片预加载js

    二、JavaScript实现图片预加载 1. 基本方法：使用`new Image()`对象 JavaScript中，我们可以创建一个新的`Image`对象，并设置其`src`属性为要预加载的图片URL。例如： ```javascript function preloadImage(url) {...

    js图片预加载

    **二、JavaScript实现图片预加载** 1. **单个图片预加载** ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; ``` 这段代码会立即开始下载图片，但不会将其插入到DOM中。 2. **多个图片...

    jquery图片预加载

    `jQuery`库以其简洁的API和强大的功能，成为实现图片预加载的常用工具。本篇文章将深入探讨如何使用jQuery实现图片预加载功能。 首先，我们需要理解图片预加载的目的。当浏览器解析HTML时，如果遇到`&lt;img&gt;`标签，它...

    JS实现图片预加载

    "JS实现图片预加载" 图片预加载是指在浏览器中预先加载图片，以提高用户体验和减少流量消耗的一种技术。JS 实现图片预加载可以通过使用 Image 对象来实现图片的预下载，并且可以结合容器的宽和高，按照一定的缩放...

    jQuery实现图片预加载

    **jQuery实现图片预加载** 在Web开发中，用户体验是一个至关重要的因素，而图片加载速度直接影响着用户对网站的第一印象。为了提升用户体验，开发者通常会采用图片预加载技术，确保图片在用户需要时能够快速显示。...

    图片预加载特效

    本篇文章将详细探讨图片预加载的概念、原理以及实现方法。 首先，我们要理解什么是图片预加载。在网页设计中，当用户打开一个页面时，浏览器会按照HTML代码中的顺序逐行解析，遇到图片标签（`&lt;img&gt;`）时才会开始...

    jquery实现图片预加载技术，使得图片加载更为流畅，和谐。

    本篇文章将深入探讨如何使用jQuery实现图片预加载，并探讨相关的优化策略。 首先，图片预加载的基本原理是在页面加载时，提前请求图片资源，将其缓存到浏览器中，以便用户在实际查看图片时可以快速显示出来。这样...

    jquery 预加载图片

    本话题主要围绕"jQuery 预加载图片"这一主题展开，我们将深入探讨jQuery库如何帮助开发者实现图片预加载功能。 jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等多个方面的工作...

    图片预加载效果

    图片预加载技术是一种优化网页性能的方法，主要用于提升用户体验，尤其是对于图像密集型的网站或应用。当用户浏览网页时，预加载技术会提前加载部分或全部未来可能需要的图片资源，这样在用户实际查看这些图片时，...

    jquery图片预加载延迟加载

    总结，通过jQuery实现图片预加载和延迟加载，可以有效提升网页加载速度，改善用户体验。预加载保证了关键内容的快速显示，而延迟加载则减少了非必要资源的初期下载，两者结合使用可实现更优化的加载策略。对于大型...

    Jquery实例--图片预加载

    **jQuery图片预加载技术详解** ...以下是一个基本的jQuery图片预加载的实现步骤： 1. **引入jQuery库**：在HTML文件中，我们需要引入jQuery库。对于jQuery 1.3，可以通过以下方式引入： ```html ...

    图片预加载loading

    实现图片预加载的方式多种多样，其中一种常见的方法是使用JavaScript。首先，我们需要创建一个JavaScript函数来处理预加载任务。这个函数会遍历图片列表，为每张图片创建一个新的`Image`对象，然后将图片的URL设置为...

    图片预加载插件preloadjs

    **preloadjs 图片预加载插件详解** 在Web开发中，图片预加载是一项重要的优化技术，它可以提升用户体验，确保图片在需要时能够迅速显示。preloadjs 是一款强大的JavaScript库，专为实现资源预加载而设计，包括图片...

    图片预加载

    jQuery是一款广泛使用的JavaScript库，它提供了丰富的API和插件，使得实现图片预加载变得简单。以下是一个基本的预加载插件的实现步骤： 1. 引入jQuery库：在HTML文件中，你需要首先引入jQuery库，可以通过CDN链接...

    图片预加载学习(三)：无序加载之图片切换

    在本文中，我们将深入探讨“图片预加载学习”的第三部分，重点关注无序加载以及如何实现图片切换。在网页设计和开发中，图片预加载是一项重要的技术，它可以帮助提高用户体验，尤其是当网页包含大量图片时。预加载...

    利用CSS、JavaScript及Ajax实现高效的图片预加载

    二、JavaScript实现图片预加载 使用纯JavaScript进行图片预加载是另一种常用的方法。相较于CSS，JavaScript提供了更大的灵活性。通过创建Image对象或使用XMLHttpRequest进行图片资源请求，可以在页面加载之前加载...

Magicbox
Global site tag (gtag.js) - Google Analytics