搜尋
首頁後端開發php教程javascript - 有个文章中图片的懒加载lazyload.js的疑问?

有个文章中图片的懒加载lazyload.js的疑问?

修改目标img元素的src属性为orginal属性,从而中断图片的加载。

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

求大神指点啊!

回复内容:

有个文章中图片的懒加载lazyload.js的疑问?

修改目标img元素的src属性为orginal属性,从而中断图片的加载。

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

求大神指点啊!

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

图片lazyload就需要这样,这个和服务器没有任何关系。服务器端写正则干什么?

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

orginal属性指向原图就是达到这个目的的啊,orginal这个属性是img标签没有的,浏览器DOM解析器只是当成一个普通的用户自定义属性,不会将其当成src属性那样去加载图片信息

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

这段有点不理解,是可以通过监听页面滚动事件将lazyload激活,加载真实的图片数据,通过将orgina属性值赋给src属性

例如下:
初次页面加载的时候加载到的DOM元素是这样的
<img src="/static/imghwm/default1.png" data-src="loading.gif" class="lazy" orginal="realImageFilePath" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >
那么当页面加载的时候,回去加载loading.gif,而这个文件通常就很小,能够马上加载
这样当不需要图片显示的时候,例如图片在页面的中下部,用户还没有滚动到指定位置时候,这是的图片数据就不需要加载,减少页面流量及页面的渲染数据,window.onload事件监听能更快的得到响应。这个和documentonready事件无关。
当需要显示图片的时候,也就是用户滚动到页面特定位置的时候,通过JS将img的src属性指向orginal属性的值,同时可将orginal属性删除
<img src="/static/imghwm/default1.png" data-src="realImageFilePath" class="lazy" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >
此时img指向真实的地址,图片数据才开始加载

为什么要设置original属性来实现lazyload

<code>浏览器中几乎所有操作(除了网络操作)都是在单线程中进行的。网络操作可由多个并行线程执行。并行连接数是有限的(通常为 2 至 6 个,以 Firefox 3 为例是 6 个)。
主线程有个一个事件循环,是一个无限循环,永远处于接受处理状态,并等待 事件(如布局和绘制事件)发生,并进行处理。
那么图片资源的加载就是一个网络操作,当浏览器解析到一个img标签时,就会用src指定的网络地址去加载图片信息,而不是等到documentonready事件监听执行完毕后再去加载资源,所以为了实现lazyload(不加载真实的图片资源),需要设置一个自定义属性来保存真实地址,在需要显示的时候再设置到src属性上</code>

我们可以做个简单的实验,看src是不是会被加载请求:
如下:
页面执行后,我们能chrome的资源控制台能看到
Failed to load resource: the server responded with a status of 404 (Not Found)
的提示信息
所以错误的资源请求还是发生了

<code>


    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>
       //documentonready
        $(function(){
            //在其中修改src属性值,以期实现在documentonready中修改omg src为一个占位图片
            //而不加载真实图片数据
            $('img').each(function(index,item){
                $(item).attr("original",$(item).attr('src'));
                $(item).attr("src","http://sfault-avatar.b0.upaiyun.com/305/423/3054230534-561d20a868d2e_big64");
            });
        });

    </script>


<!--错误的图片地址-->
<img  src="/static/imghwm/default1.png" data-src="http://ubmcmm.baidustatic.com/media/v1/0f0005yYIsGLBGDGfPud1000001111.png" class="lazy" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >

</code>

lazyload 本身只是个辅助,当然其功能直接手写代码能实现. 你非要让它来完成它力所不能及的事情自然是不行的.

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
您如何在PHP中創建和使用接口?您如何在PHP中創建和使用接口?Apr 30, 2025 pm 03:40 PM

本文解釋瞭如何創建,實施和使用PHP中的接口,重點關注其對代碼組織和可維護性的好處。

crypt()和password_hash()有什麼區別?crypt()和password_hash()有什麼區別?Apr 30, 2025 pm 03:39 PM

本文討論了PHP中的crypt()和password_hash()的差異,以進行密碼哈希,重點介紹其實施,安全性和對現代Web應用程序的適用性。

如何防止PHP中的跨站點腳本(XSS)?如何防止PHP中的跨站點腳本(XSS)?Apr 30, 2025 pm 03:38 PM

文章討論了通過輸入驗證,輸出編碼以及使用OWASP ESAPI和HTML淨化器之類的工具來防止PHP中的跨站點腳本(XSS)。

PHP中的自動加載是什麼?PHP中的自動加載是什麼?Apr 30, 2025 pm 03:37 PM

自動加載PHP會在需要時自動加載類文件,從而通過減少內存使用和增強代碼組織來提高性能。最佳實踐包括使用PSR-4和有效組織代碼。

什麼是PHP流?什麼是PHP流?Apr 30, 2025 pm 03:36 PM

PHP流通過一致的API來統一資源諸如文件,網絡插座和壓縮格式之類的處理,從而使復雜性抽象並增強代碼靈活性和效率。

可以使用PHP上傳的文件的最大大小是多少?可以使用PHP上傳的文件的最大大小是多少?Apr 30, 2025 pm 03:35 PM

本文討論了在PHP中管理文件上傳大小的管理,重點是2MB的默認限制以及如何通過修改PHP.INI設置來增加它。

PHP中的無效類型是什麼?PHP中的無效類型是什麼?Apr 30, 2025 pm 03:34 PM

本文討論了PHP 7.1中引入的PHP中的無效類型,允許變量或參數為指定類型或NULL。它突出顯示了諸如提高可讀性,類型安全性和明確意圖的好處,並解釋瞭如何聲明

unset()和unlink()函數之間有什麼區別?unset()和unlink()函數之間有什麼區別?Apr 30, 2025 pm 03:33 PM

本文討論了unset()和unlink()功能在編程中的差異,重點關注其目的和用例。 unset()從內存中刪除變量,而unlink()從文件系統中刪除文件。兩者都對效率至關重要

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具