jquery图片预加载

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量81 收藏
点赞数
文章标签： javascript xhtml python ViewUI
原文链接：https://my.oschina.net/glelaine/blog/286419
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!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>无标题文档</title>

<meta name="author" content="刘">


</head>


<script src="js/jquery-1.7.1.min.js" type="text/javascript" ></script>


<style type="text/css">

div,img{ width:270px; height:129px; border:1px solid #CCCCCC; padding:3px; float:left; margin:20px;}

</style>


<script>

function scanLoad(){//扫描需要加载的div

$.each($("div"),function(i,o){

var windowHeight=$(window).height();

var scrollTop=$(document).scrollTop();

windowHeight=windowHeight/1;//测试当图片出现在窗口上半部分时显示，

if( $(o).offset().top<(scrollTop+windowHeight)  && $(o).offset().top > scrollTop )//判断div是不是出在可见的位置

{

var img=$("<img/>").attr("src",$(o).attr("pic")).fadeTo("fast",0);//创建一个可见度为0的图片，地址为div上面的pic属性

$(o).replaceWith(img);//把div替换成这个新创建的图片

img.fadeTo("slow",1);//让它慢慢的显示出来

}

});

}

$(function(){//页面第一次加载时

scanLoad();//扫描需要加载的div

$(document).scroll(scanLoad);//当滚动条滚动时,扫描需要加载的div

$("body").scroll(scanLoad);//加这个为了某些浏览器的兼容

$(window).scroll(scanLoad);//加这个也是为了某些浏览器的兼容

});

</script>


<body>



<!--

下面放了一些div,带了个pic的参数，所以可以判断浏览器打开时不会加载图片的，

当然写法还可以这样

<div>

<img pic="http://www.baidu.com/img/baidu_sylogo1.gif"/>

</div>

注意img的属性不是src了哦，src的话会把图片下载下来的，你可以捕捉滚动条消息，当发现该div在可视范围的时候，把img添加一个src属性（src="http://www.baidu.com/img/baidu_sylogo1.gif"）

-->



<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>

<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>





</body>

</html>


转载于:https://my.oschina.net/glelaine/blog/286419

weixin_33912453
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery图片预加载代码
04-09
**jQuery图片预加载技术详解** 在网页设计中，图片预加载是一种优化用户体验的重要技术，它允许我们在用户实际看到图片之前预先加载图片数据，确保图片能够快速显示，避免页面加载时出现明显的延迟。jQuery图片预...
jquery 实现图片预加载
罗小文
04-06 1677
<script type="text/javascript"> // 预加载 function preloadImg(list, imgs) { var def = $.Deferred(), len = list.length; $(list).each(function(i, e) { var img = new Image(); img.src = e; if (img.complete) { imgs[i] = img; len--;
jQuery插件之图片预加载
Freya_yyy的博客
04-21 423
背景： 图片是web页面的重要组成部分，也是前端页面优化的重要内容。当用户访问一个比较庞大的页面时，若相关资源没有提前加载，可能会展示给用户一片空白，从而导致用户流失等；再比如受网速的影响，资源加载时间较长，可能使得页面出现错乱等问题。因此预加载就显得很有必要，同时预先加载的页面可以在用户需要时，直接从本地缓存中渲染，减少用户的等待时长。 图片优化--------预先加载； 提升用户体验效果...
Jquery图片懒加载和预加载
weixin_45203607的博客
09-24 945
Jquery图片懒加载和预加载 懒加载 1.什么是懒加载 Lazy Load也叫懒加载，延迟加载，顾名思义，就是在图片未到达可视区域时，不加载图片，我们常常在很多的优秀网站上看到类似的例子，例如迅雷、土豆、优酷等，由于一个网页的图片非常多，一次性加载增加服务器压力，而且用户未必会拉到底部，浪费用户流量，Lazy Load采用按需加载，更快的加载速度从而达到优化网页的目的。 懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。 用户滚动到它们之前，可视区域外的图像不会加载。这与图像
jQuery图片预加载
andy18217219485的博客
06-25 69
let imageObj = new Image(); imageObj.src = '×图片路径×'; $(imageObj).on('load error', function () { // load 图片加载成功 error 图片加载失败 }); 转载于:https://www.cnblogs.com/chenmenghui/p/9223776.html...
jquery图片预加载插件
weixin_34221036的博客
05-04 94
更多资源请Star：https://github.com/maidishike... 图片预加载插件 网站开发时经常需要在某个页面需要实现对大量图片的浏览，就会出现网页假死的现象，所以为了让图片在转换的时候不出现等待，我们最好是先让图片预先加载到本地，让用户无需等待过长的时间就能看到其他图片，优化用户体验 调用方式 请预先引入jquery...
jQuery图片预加载的分析
南大亚多
04-18 354
getBoundingClientRect().bottom
Jquery 图片预加载
iteye_9264的博客
12-22 79
插件地址:[url]http://www.appelsiini.net/projects/lazyload[/url] 使用的是1.7.0版本的Jquery 中文示例文档参考：[url]http://www.chhua.com/web-note1934[/url] 最新版本必须使用 data-original 属性 定义 需加载图片地址。 简单调用代码，详解参考官方文档...
css完成图片预加载,jQuery简单实现图片预加载
weixin_39662462的博客
08-04 160
jQuery实现图片预加载JS代码$(function(){loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg);function loadImg(url,callback){var img = new Image();img.onload ...
jquery的图片预加载
running_shuai的博客
06-30 770
图片预加载 loadding  的时候加载下一次要加载的图片。 图片预加载的特点：1. 提前加载所需图片； 2. 更好的用户体验；图片预加载又分为有序加载和无序加载，根据网站或功能模块使用，提高用户体验 data-属性的写法是在html5中新加的一种自定义属性书写方式。JQuery可以通过.data('名称')进
jquery 当页面图片加载之后_图片的懒加载和预加载
weixin_39916355的博客
11-20 277
一、懒加载【1.1】什么是懒加载？懒加载也就是延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次，俗称占位图)，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。【1.2】为什么要懒加载？当很多页面，内容很丰...
jquery 图片预加载 自动等比例缩放插件
12-09
代码如下:/* **************图片预加载插件****************** ///作者：没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明：在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来 可对图片进行是否...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 452
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 85
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 268
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 226
【代码】vue el-select的下拉树形结构。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1320
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
jquery动态切换图片地址
05-13
如果你想在更改图片地址之前预加载图片，可以使用 `Image` 对象来实现，例如： ```javascript var img = new Image(); img.src = 'image2.jpg'; img.onload = function() { $('#myImage').attr('src', 'image2.jpg...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值