jieyou / lazyload Goto Github PK

View Code? Open in Web Editor NEW

714.0 714.0 318.0 1.17 MB

一个jQuery或zepto的图片延迟加载插件。An jQuery | zepto plugin for lazy loading images.

JavaScript 100.00%

lazyload's People

Contributors

Stargazers

Watchers

Forkers

snyangwei crny weiguang3100 nickzhuyb susubanana angck shekobe yikey js5323 wallaceyuan carvinlo formatcc zhweta0015 mackcyl liuyuan87 yongx liudongyun yutaogege wxb5859297 plhwin lys623 yanchengqu wuyanwen zhengwenjie tonychanhoho fujscss hexiyou darkmirrors awayjin torresyb gto999 cnzh2992 yangcwgit tanxd2002 solobat mylifebob yooungt13 xiaoweidotnet renura lid0917 johnnychn tonyjiang88215 the8th prada1120 kimishaw lldddd freeyiyi1993 joeth cnluckylee jackyzonewen snister wormcc naoyeye maciao jeeluo oneofthetwentythousand yiwei1223 javalixue tianjun7321 xilianxiaoli hexuanzhang li9269391 jiaojinqian 189 gaofeiyu zhengbai imjerrybao philip8728 heshan0927 alexdong510 lsjing cowzj charsten alexllllllming yizisuancaiyu wzlee katecqc ilumiere adntian yizhihouzi wangmd vector20240801 dongweb jindasong zhuziyi1989 bluepeople1 liulu081227 hu19891110 xwg2015 xbzhs shaofancun metallica8023 itliuchang bannermiao zcorw livi12 wagnlinzh loongit xiaofeng00 harryfight

lazyload's Issues

MIT license

Hi, nice work.

MIT license means you can do everything else but remove the original authors name from the source. So it would be polite to put it back.

参数未继承

代码里options参数没有继承
比如：

那么我在belowthefold函数里应该可以console.log(options.threshold);
function belowthefold($element, options){
console.log(options.threshold);
var fold
if(options.$container == $window){
fold = ('innerHeight' in w ? w.innerHeight : $window.height()) + $window.scrollTop()
}else{
fold = options.$container.offset().top + options._$container.height()
}
return fold <= $element.offset().top - options.threshold
}
结果我发现，options.threshold还是0
我觉得应该在$.fn.lazyload方法里加$.extend(defaultOptions, options || {});

懒加载在浏览器效果ok，在app客户端 webview 中没有效果，图片一下子都加载了，急！

如题

ajax加载图片，lazyload失效

具体描述如下：
当ajax获取json中的图片地址，并插入空白页面后，图片插入的区域在可视区域内并超过可视范围，lazyload会失效，图片会全部加载，经测试发现，如果插入的图片不在可视区，loazyload正常。

lazyload无效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="list"></div>
</body>
</html>

lazyload有效，ajax插入的图片不在可视区

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br>t<br></div>
<div id="list"></div>
</body>
</html>

代码如下

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json'
}).done(function(response) {
    var products = response.products;
    var _str = '';
    for (var i = 0; i < products.length; i++) {
        _str+='<div><img class="lazy" data-original="'+products[i].logourl+'"></div>';
    };
    $('#list').append(_str);
    $('img.lazy').lazyload({
        effect : "fadeIn"
    });
})

zepto 么有动画效果

使用jq 可以，但是zepto没有效果

默认加载图

现在的默认的填充图是grep.gif，如果我设置为我的一个动态的图，例如iOS的菊花，然后菊花会被拉升整个图像的大小，如何处理？

页面page上有zoom 的时候，懒加载不正确，部分无法加载

通过seajs加载会报错

报错如图：

使用背景来替换显示（padding-top）Android端得不到background-images值

#使用背景来替换src，结果安卓客户端(魅族)background-images得不到值。

$('<img />').on('load', function(){ 
    alert('这里走不通...')
    loadFunc()
    if(options.load != emptyFn){
        options.load.call(element, $element, $elements.length, options)
    }
}).attr('src',originalSrc)

连续加载两次图片

在chrom的devtool的network中，发现一张图片被加载两次。

使用zepto v1.2，AMD加载。请教下这是什么原因呢？

lazyload好像和react有冲突？

页面中有部分内容是react组件，引用之后就导致lazyload不可用？有解决办法吗？

getUnloadElements里面不能正确获取_lazyload_loadStarted属性

lazyload/lazyload.js

Line 138 in 2de2da3

return !$elements.eq(i)._lazyload_loadStarted

关于加载顺序导致提示找不到jq或者zepto

我在定义这个模块的时候顺序是这样的

  $=require('zepto'),
  lazyload=require('./lazyload.min');

但是他还是会提示zepto加载不到的问题。
包括直接用

seajs.use(['zepto','lazyload'],function($){
})

两种都会提示找不到jq或者zepto的问题

加载问题

我用了iScroll来滚动，iScroll区域使用可是使用lazyload只能加载首屏的数据，超出的部分滚动的时候不会加载，如果在chrome调试区域修改拉升模拟器屏幕的高度，会触发加载刚刚显示的数据

有个问题，ajax选项卡切换，某些手机浏览器图片无法加载

例：
有一个选项卡，选项卡里的内容是ajax的请求数据，并通过字符串拼接然后插入到某个区域里的，可图片无法加载，在PC浏览器没问题，测试过多台手机，但在QQ浏览器和微信浏览器、UC浏览器有问题，图片无法显示，百度手机浏览器没有问题。

如何让一个不是图片地址的url赋值到图片的src上？

rt，我想实现一个滚动统计的效果，图片的 data-original 不是一个图片的路径而是后台服务器的一个get请求的路径。我想让屏幕滚动的时候将这个路径赋值到src上但是并不好使啊，请问这个我该怎么做呢

产品详情或文章详情页面，很多图片是后台编辑框插入的，已经带有src属性了，怎么改成data-original呢？

如果是图片列表页面，可以给img删除src属性然后加上data-original属性；
可是如果是后台编辑框插入的图片，这个怎样删除img的src属性呢？

当图片不知道宽高的时候不知如何处理

一个商品详情，后台随机编辑上传图片后，只能让图片在手机上宽度100%，高度自适应的情况如何处理？

为什么在移动端显示图片用div background image，不用img标签?

你好,
看到lazyload在移动端的用法是

<div class="lazy" data-original="img/example.jpg"><div>我想问问，为什么在移动端要用div的backgroud-iamge来显示图片，而不用img标签呢？