<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lazy_load 0.2 图片延迟加载</title>
<style>
.lazyimg{
width:150px;
height:150px;
background:url('imgs/loading.gif') 50% 50% no-repeat transparent;
border: solid 1px #efeffe;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
//load_img();
//为了显示loading样式,延迟2秒加载图片,实际开发中直接调用就行.
setTimeout(function(){load_img();},2000);
function load_img(){
var imgs = document.getElementsByTagName('img');
var imgs_length = imgs.length;
for(var i=0;i<imgs_length;i++){
var old_img = imgs[i];
if(!old_img.getAttribute('lazysrc'))
continue;
var img = document.createElement('img');
img.onload = (function(old_img,img){
return function(){
old_img.src = img.src;
}
})(old_img,img);
img.src = old_img.getAttribute('lazysrc');
}
}
}
</script>
<img src="imgs/blank.gif" lazysrc="imgs/1.jpg" class="lazyimg" />
<img src="imgs/blank.gif" lazysrc="imgs/2.jpg" class="lazyimg" />
<img src="imgs/blank.gif" lazysrc="imgs/3.jpg" class="lazyimg" />
<img src="imgs/blank.gif" />
<img src="imgs/blank.gif" lazysrc="" />
</body>
</html>
分享到：
相关推荐
图片延迟加载（Lazy Load）是一种优化网页性能的技术，主要用于处理大量图片或多媒体资源的加载。在网页设计中，当用户滚动页面时，只有进入视口的图片才会开始加载，而那些还未显示出来的图片则会暂时保持占位符...
`lazyload.js` 是一个实现图片延迟加载的JavaScript库，它的特点是轻量级且易于使用，没有多余的代码，使得开发者能够快速地集成到项目中。在本文中，我们将深入探讨`lazyload.js`的工作原理、使用方法以及如何在...
在“lazy_load_tree_layui.zip”这个压缩包中，我们看到了一个经过自动化构建的layui源代码，其中特别添加了懒加载功能，这对于处理大数据量的树形结构数据尤为关键。本文将深入解析这个懒加载树组件的实现原理及...
JQuery 图片延迟加载 lazyload
网页内容延迟加载（LazyLoad）是一种优化网页性能的技术，它主要应用于图片、视频或大量文本内容的加载。这种技术的核心思想是，只加载用户当前视口内的内容，当用户滚动页面，即将进入视口的内容才会被加载。这样...
延迟加载滚动视图ScrollView的包装器，将启用延迟加载用法将lazy_load_scrollview依赖项添加到您的pubspec.yaml ： dependencies : lazy_load_scrollview : 1.3.0 在DART代码，进口package:lazy_load_scrollview/...
"lazyload.js图片延迟加载（懒加载）插件" 是一个JavaScript库，主要用于优化网页性能，特别是那些包含大量图片的页面。它实现了“懒加载”技术，即图片不会在页面加载时立即加载，而是在用户滚动到图片即将出现在...
jQuery图片延迟加载插件Lazy Load是一种高效的前端技术，旨在优化网页性能，特别是在包含大量图片的网页上。在当今互联网环境中，用户体验是至关重要的，而快速的页面加载速度是提升用户体验的关键因素之一。Lazy ...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
在网页设计中，为了提高页面加载速度和优化用户体验，一种常见的技术是图片延迟加载，也称为懒加载（Lazy Load）。JavaScript 是实现这一功能的主要工具，它允许我们在用户滚动到图片时才加载图片，而不是一次性加载...
Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。...由于内容比较多，下一篇再介绍图片延迟加载效果。 兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
`lazyload.js`是一个轻量级、高性能的JavaScript库，专门用于实现图片和其他元素的延迟加载。它具有以下特点： - **简单易用**：只需几行代码即可集成到项目中。 - **兼容性好**：支持所有现代浏览器，包括IE9及...
**jQuery LazyLoad 图片延迟加载技术** 在网页设计中，图片是重要的元素之一，但大量图片的加载往往会导致页面加载速度变慢，用户体验下降。为了解决这个问题，开发者们引入了图片延迟加载（Lazy Load）技术。...
**jQuery LazyLoad 插件详解：实现图片延迟加载** 在网页设计中，为了提升用户体验，减少页面初次加载的时间，一种常见的优化策略是采用图片延迟加载（Image Lazy Load）技术。`jQuery LazyLoad` 是一个非常实用的 ...
"lazyload.js" 是一个专门用于延迟加载图片、视频和其他HTML元素的JavaScript库。它通过监听用户的滚动事件，判断元素是否进入视口，如果进入则加载相应的资源。这个库通常会替换原始的`src`属性为占位符，然后在...
在前端开发中，图片懒加载（Lazy Load）是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片，而不是一次性加载所有图片。这样可以显著减少页面初始加载时间，提升用户体验，尤其在处理大量...
懒加载（Lazy Load）技术是JS优化网页性能的一种策略，它延迟了非视口内资源的加载，直到用户滚动到相应位置时才进行加载。这样可以显著减少页面初次加载时的数据量，提升用户体验。 标题中的"js lazyLoad 图片懒...
jQuery_lazyload是一个非常实用的JavaScript库，用于优化网页性能，特别是在处理大量图片或者内容时。这个插件的主要目的是延迟加载，即在用户滚动到页面的特定部分时才加载那些可视区域以外的内容，从而减少初次...
为了解决这个问题，开发人员引入了“图片延迟加载”技术，jQuery作为一款广泛使用的JavaScript库，提供了实现这一功能的强大工具。本文将深入探讨jQuery图片延迟加载的概念、优势以及实现方法。 **一、什么是图片...