前端实现图片（img）预加载

最新推荐文章于 2024-06-24 23:32:45 发布

Revival_Liang

最新推荐文章于 2024-06-24 23:32:45 发布

阅读量2.9k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Revival_Liang/article/details/72844572

版权

本文介绍了如何使用jQuery实现图片预加载功能，通过创建一个`jquery.lazyload.js`文件并导入相关代码，帮助提升网页加载速度和用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<style type="text/css">
	.box{width: 1000px;height: 7000px;position: relative;}
	.igm1,.igm2,.igm3{width: 1000px;height: 1000px;margin-bottom: 500px;}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.js" ></script>
<body>
<div class="box">
	<!--data-original是要加载的图片 src中的是加载动画-->
	<img class="igm1" data-original='http://img.8kmm.com/2014/2/201402150857153283.jpg' src="ori.png"/>
	<img class="igm2" data-original='http://img.8kmm.com/2014/2/201402150857161214.jpg' src="ori.png"/>
	<img class="igm2" data-original='http://img.8kmm.com/2014/2/201402150857172803.jpg' src="ori.png"/>
</div>
<script type="text/javascript">
$("img").lazyload({
     effect :"fadeIn",
      threshold :200
});
</script>
</body>
</html>

新建jquery.lazyload.js文件导入下面代码即可，当然你也可以去百度上搜

(function($, window, document, undefined) {
    var $window = $(window);

    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,
            failure_limit   : 0,
            event           : "scroll",
            effect          : "show",
            container       : window,
            data_attribute  : "original",
            skip_invisible  : false,
            appear          : null,
            load            : null,
            place

最低0.47元/天解锁文章

Revival_Liang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端实现图片（img）预加载

.box{width: 1000px;height: 7000px;position: relative;} .igm1,.igm2,.igm3{width: 1000px;height: 1000px;margin-bottom: 500px;} $("img").lazyload({ effect :"fadeIn", threshold
复制链接

扫一扫

专栏目录