javascript - 关于lazyload图片懒加载的一些问题

Question

我有这么一个问提，一开始很多图片，src是正常的图片，我需要用js把所有src改成lazyload的小图，再加上src，可是页面一加载js未执行就会执行src的http请求，把js放在head的话又获取不到所有的图片，有什么办法读取到img标签却不让src执行http请求呢？（图片一开始就是 ,不能改，通过文本编辑器写的）

整理：

如何在不修改內容源碼的前提下，做到 lazyload。

Answer 1

用document.querySelector('img').onload试试？感觉你这个需求奇奇怪怪的..能编辑页面代码为什么不能去掉src属性呢？

Answer 2

我认为这样是不可以的。

现在一般编写lazyload都是在img标签中添加一个自定义属性标签，然后再用js处理。

如上所说，是在html标签加载后，才执行js的，那样的话，img加载图片是默认行为。在没有执行js前，就已经开始了。以后期js再行处理时，也不会阻止图片的下载。

Answer 3

我答案是：在不修改內容源碼的前提下，無法做到 lazyload。

---

經測試，以下方案不能滿足要求。

我做過一個簡易 XSS 入侵主動防禦系統，就是前端的一個提前加載的 JS，掃描頁面中的元素去除可能的威脅。

new MutationObserver(function(u) {
    u.forEach(function(m) {
        if (m.type === "childList") {
            var ns = m.addedNodes;

            for (var i = 0, n = ns.length; i < n; ++i) (function(o){
                console.log(o);

                if (o.nodeName.toUpperCase() !== "IMG")
                    return;

                o.setAttribute("src", o.getAttribute("src"));
                // o.setAttribute("src", "grey.gif");
                o.removeAttribute("src");
            })(ns[i]);
        }
    })
}).observe(window.document, {childList: true, subtree: true});

在 Chrome 下，能夠阻止 img、其它 js 的加載，應該能滿足你的要求。可惜目測只有 Chrome 支持。。。補充，firefox 也行。補充，firefox 不能阻止請求的發出。。。所以不行。補充。。。chrome 只會中斷無法徹底阻止請求，服務器依舊會收到請求，只是瀏覽器拒接接收。

其它瀏覽器只能說目前無解，用後端處理一下吧

還有一個方案就是，後端不直接輸出 HTML，前端 AJAX 加載並處理然後顯示。

Answer 4

建议还是直接修改模板，如果不修改模板即使实现代码也会很恶心，完全没必要。需要实现功能必须要有一定条件才能做出优化，不然还不如不改。