lazyload（react-lazyload使用）

本文目录

• react-lazyload使用
• Jquery.lazyload.js究竟要怎么使用
• vue-lazyload有什么作用
• 怎样使用lazyload延时加载js和css
• pdf.js可以实现lazyload吗
• 使用ajax后，lazyload.js失效，怎么解决

react-lazyload使用

《div className="relative"》         《a className="btn-rule abso" onClick={() =》 setVisibleMask(true)}》《/a》         《LazyLoad once offset={100} height={200} scrollContainer=".baoliao" scroll={true}》           《img             src={require(’../../Static/Img/activityBaoliao/index/1.jpg’)}             className="baoliao_img"           /》         《/LazyLoad》       《/div》       《div className="relative"》         《i className="abso img-hand img-hand1"》           《img src={require(’../../Static/Img/activityBaoliao/indexhand.png’)} /》         《/i》         《i className="abso img-hand img-hand2"》           《img src={require(’../../Static/Img/activityBaoliao/indexhand.png’)} /》         《/i》         《a className="abso link-day"》《/a》         《a className="abso link-week"》《/a》         《LazyLoad once offset={100} height={200} scrollContainer=".baoliao" scroll={true}》           《img             src={require(’../../Static/Img/activityBaoliao/index/2.jpg’)}             className="baoliao_img"           /》         《/LazyLoad》       《/div》       《div className="relative"》         《a className="btn-prize abso"》《/a》         《LazyLoad once offset={100} height={200} scrollContainer=".baoliao" scroll={true}》           《img             src={require(’../../Static/Img/activityBaoliao/index/3.jpg’)}             className="baoliao_img"           /》         《/LazyLoad》       《/div》

Jquery.lazyload.js究竟要怎么使用

//引入jquer.js和lazyload.js《script type="text/javascript"》 $(function() { $("img").lazyload({ effect : "fadeIn" }); }); 《/script》 其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；fadeIn是图片显示效果这样基本就可以了！如果上面的功能可能没有达到你的要求，还有几个选项可供设置。可以设置阀值来控制 灵敏度$(“img”).lazyload({ threshold : 200 }); 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件$("img").lazyload({ placeholder : "img/grey.gif", event : "click" }); 还可以通过定义effect 参数来定义一些图片显示效果$("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" }); 事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:$("img").lazyload({ placeholder : "img/grey.gif", event : "click" }); 延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.$(function() { $("img:below-the-fold").lazyload({ placeholder : "img/grey.gif", event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); }); 图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.CSS#container { height: 600px; overflow: scroll; } JavaScript 代码:$("img").lazyload({ placeholder : "img/grey.gif", container: $("#container") }); 当图片不顺序排列,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.$("img").lazyload({ failurelimit : 10 });

vue-lazyload有什么作用

可以对图片和背景图进行懒加载，需要再main.js中全局注册，配置重试次数、默认图、加载出错图片等信息使用时直接用v-lazy代替 ：src，用v-lazy：background-image=“背景url”代替style=“background-image：...”

怎样使用lazyload延时加载js和css

//前提引入jqurey.js 和 jquery.lazyload.js《script src="jquery-1.11.0.min.js"》《/script》《script src="jquery.lazyload.js?v=1.9.1"》《/script》//然后，《script type="text/javascript" src="《?php bloginfo(’template_directory’);?》/js/jquery.lazyload.js"》《/script》 《script type="text/javascript"》 $(function() { //$("img")是某个标志，你可以换成别的对象（$("#id")） $("img").lazyload({ effect : "fadeIn" }); }); 《/script》

pdf.js可以实现lazyload吗

　　尊敬的用户，您好！很高兴为您答疑。　　这是pdf.js的helloworld样例：　　PDFJS.getDocument(’helloworld.pdf’).then(function(pdf) {　　// Using promise to fetch the page　　pdf.getPage(1).then(function(page) {　　var scale = 1.5;　　var viewport = page.getViewport(scale);　　//　　// Prepare canvas using PDF page dimensions　　//　　var canvas = document.getElementById(’the-canvas’);　　var context = canvas.getContext(’2d’);　　canvas.height = viewport.height;　　canvas.width = viewport.width;　　//　　// Render PDF page into canvas context　　//　　var renderContext = {　　canvasContext: context,　　viewport: viewport　　};　　page.render(renderContext);　　});　　});　　根据pdf.js的helloworld代码来看，其应该是支持lazyload的，但是据这段赋值可以看出（canvas.height = viewport.height;canvas.width = viewport.width;）画布的长宽仍然是需要您手动指定的。当然，一般此类赋值我们可以认为其又一个官方默认值，这个可以从其提供的demo中体现出来。　　希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。

使用ajax后，lazyload.js失效，怎么解决

根据你的描述，应该是你代码写的顺序有问题。首先，你图片应该是ajax获取路径之后动态添加到页面上的吧，如果是这样，那么你可能就是在ajax返回图片路径并添加到页面之前执行了$("img.lazy").lazyload();这句话。图片都没有加载到，肯定失效了。所以，你应该在ajax返回图片路径，并添加到页面上之后，在执行懒加载初始化的语句。希望能帮到你。【我只是猜测】